I started out my project with the heart, just trying different codes until I liked the shape of the heart. I then did the outside rectangles just to add a little more to the project. I finally came up with arrow because hearts remind me of my least favorite holiday, Valentine's Day!
Code
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
// outside rectangle
context.beginPath();
context.rect(0, 0, 800, 600);
context.lineWidth = 20;
context.strokeStyle = 'rgb(200, 100, 100)';
var grd = context.createLinearGradient(0, 0, 800, 600);
grd.addColorStop(0, 'rgb(255, 255, 225)');
grd.addColorStop(.35, 'rgb(200, 125, 150)');
grd.addColorStop(0.5, 'rgb(100, 200, 210)');
grd.addColorStop(.65, 'rgb(200, 125, 150)');
grd.addColorStop(1, 'rgb(255,255, 225)');
context.fillStyle = grd;
context.fill();
context.stroke();
//second rectangle
context.beginPath();
context.rect(50,50,700,500);
context.lineWidth=10;
context. strokeStyle='rgb(200,100,100)';
context. stroke();
//third rectangle
context.beginPath();
context.rect(25,25, 750,550);
context.lineWidth=10;
context. strokeStyle='rgb(200,100,100)';
context. stroke();
//arrow line
context.beginPath();
context.moveTo(75,75);
context.lineTo(675,475);
context.lineWidth=10;
context.strokeStyle='rgb(200,100,100)';
context.lineCap='round';
context.stroke();
//end lines
context.beginPath();
context.moveTo(150,55);
context.lineTo(80,150);
context.lineWidth=10;
context.strokeStyle='rgb(200,100,100)';
context.stroke();
context.beginPath();
context.moveTo(170,60);
context.lineTo(100,160);
context.lineWidth=10;
context.strokeStyle='rgb(200,100,100)';
context.stroke();
//arrow head
context.beginPath();
context.moveTo(620,375);
context.lineTo(675,475);
context.lineWidth=10;
context.strokeStyle='rgb(200,100,100)';
context.lineCap='round';
context.stroke();
context.beginPath();
context.moveTo(570,475);
context.lineTo(675,475);
context.lineWidth=10;
context.strokeStyle='rgb(200,100,100)';
context.lineCap='round';
context.stroke();
// heart
context.beginPath();
context.moveTo(400,200);
context.bezierCurveTo(200, 0, 100, 200, 250, 325);
context.quadraticCurveTo(360,400, 400, 500)
context.quadraticCurveTo(460,400, 550, 325)
context.bezierCurveTo(700, 200, 600, 0, 400, 200);
context.lineWidth = 40;
context.strokeStyle = 'rgb(200,100, 100)';
context.lineCap = 'round';
context.fillStyle = 'rgb(255, 255, 225)';
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