As cute as this heart is, it took a lot out of me. I am officially 5 years older because of this heart. On a more serious note, it feels good to get a deeper understanding of digital arts!
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//upper left quadrant
var startx = 400;
var starty = 200;
var controlx1 = 280;
var controly1 = 60;
var controlx2 = 80;
var controly2 = 250;
var endx1 = 250;
var endy1 = 350;
//lower left quadrant
var controlx3 = 365;
var controly3 = 390;
var endx2 = 400;
var endy2 = 500;
//lower right quadrant
var controlx4 = 435;
var controly4 = 390;
var endx3 = 500;
var endy3 = 350;
//upper right quadrant
var controlx5 =720;
var controly5 =250;
var controlx6 = 510;
var controly6 = 60;
//heart linear gradient
var grdstartx = 175;
var grdstarty = 125;
var grdendx = 525;
var grdendy = 410;
//circle1
var centerx = 400;
var centery = 300;
var radius = 90;
//circle2
var centerx2 = 400;
var centery2 = 280;
var radius2 = 60;
//circle3
var centerx3 = 400;
var centery3 = 260;
var radius3 = 35;
//heart
context.beginPath();
context.moveTo(startx, starty);
context.bezierCurveTo(controlx1, controly1, controlx2, controly2, endx1, endy1);
context.quadraticCurveTo(controlx3, controly3, endx2, endy2);
context.quadraticCurveTo(controlx4, controly4, endx3, endy3);
context.bezierCurveTo(controlx5, controly5, controlx6, controly6, startx, starty);
var grd = context.createLinearGradient(grdstartx, grdstarty, grdendx, grdendy);
grd.addColorStop(.3, 'rgb(255, 50, 50)');
grd.addColorStop(.9, 'rgb(175, 100, 180)');
context.fillStyle = grd;
context.fill();
context.stroke();
//circle1
context.beginPath();
context.arc(centerx, centery, radius, 0, 2*Math.PI,false);
context.fillStyle = 'rgb(50, 250, 255)';
context.fill();
context.stroke();
//circle2
context.beginPath();
context.arc(centerx2, centery2, radius2, 0, 2*Math.PI,false);
context.fillStyle = 'rgb(255, 55, 166)';
context.fill();
context.stroke();
//circle3
context.beginPath();
context.arc(centerx3, centery3, radius3, 0, 2*Math.PI,false);
context.fillStyle = 'rgb(255, 150, 66)';
context.fill();
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment