The first heart I tried to construct, which is the one in the middle of the graphic, is a little disproportional. I used three different quadratic curves and tried to make them all meet smoothly, however, I could not fix the hard edges on the outside of the heart. Also, using a quadratic curve, I could not get the bottom of the heart to be as sharp as I would like. I could not get a gradient in this image, but was able to fill it with a solid color.
The heart that is more towards the left of my graphic turned out looking much better than the first. I was able to easily smooth all edges, which also allowed me to fill it with a radial gradient. I used two bezier curves that connected together.
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
context.beginPath();
context.rect(0, 0, canvas.width, canvas.height);
context.fillStyle = 'rgb(200,69,141)';
context.fill();
context.stroke();
var grd = context.createLinearGradient(400, 0, 400, 600);
// light blue
grd.addColorStop(0, 'rgb(210,204,205)');
// dark blue
grd.addColorStop(.5, "#hotpink");
grd.addColorStop(1, 'rgb(230,100,204)');
context.fillStyle = grd;
context.fill();
context.beginPath();
context.moveTo(238, 250);
context.quadraticCurveTo(288, 0, 388, 239);
context.quadraticCurveTo(488, 0, 538, 250);
context.quadraticCurveTo(388, 600, 238, 248);
context.fillStyle = 'rgb(204,0,102)';
context.fill();
context.lineWidth = 10;
// line color
context.strokeStyle = 'rgb(102,0,51)';
context.stroke();
context.beginPath();
context.moveTo(88, 230);
context.bezierCurveTo(160, 10, 180, 180, 99, 390);
context.moveTo(88, 230);
context.bezierCurveTo(10, 10, 10, 230, 99, 390);
var grd = context.createRadialGradient(28, 20, 10, 38, 150, 200);
grd.addColorStop(0, "#pink");
grd.addColorStop(1, 'rgb(204,0,102)');
context.fillStyle = grd;
context.fill();
context.fill();
context.lineWidth =1;
// line color
context.strokeStyle = 'rgb(204,0,102)';
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment