I decided to create a house scenery,with the HTML codes, because i thought it would be as colorful as I thought it would be. I started my layout with a basic rectangle for the canvas itself. Then added the color of the sky, later it took me some trouble to add the hill and make it linear, my one trouble was making the sidewalk as well as lining up the house correctly. I used the quadratic curve for the hill and the bezier curve for the sidewalk. The other things like the door, sun, rays, etc were not as complicated as I thought it would be. My canvas piece turned out better than I expected, even though it looks like a child drew this(haha). But for someone who joined the class later than usual, and got the hang of it, its decent :)!
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//rectangle
context.beginPath();
context.rect(0, 0, 800, 600);
//sky
context.fillStyle = 'rgb(100, 200, 255)';
context.fill();
context.stroke();
//hill
context.beginPath();
context.moveTo(0,500);
context.quadraticCurveTo(400, 425, 800, 500);
context.fillStyle = 'rgb(0,255,0)';
context.fill();
context.stroke();
//grass color
context.beginPath();
context.rect(0, 500, 800, 100);
context.fillStyle = 'rgb(0,255,0)';
context.fill();
context.strokeStyle = 'rgb(0,255,0)';
context.stroke();
//house square
context.beginPath();
context.rect(150, 255, 500, 220);
context.fillStyle = 'rgb(245,210,120)';
context.fill();
context.strokeStyle = 'black';
context.stroke();
//sidewalk
context.beginPath();
context.moveTo(450,475)
context.bezierCurveTo(530, 520, 510, 540, 320, 600);
context.strokeStyle = 'gray'
context.lineWidth = 5;
context.stroke();
//sidewalk pt 2
context.beginPath();
context.moveTo(350,475)
context.bezierCurveTo(430, 510, 510, 540, 120, 600);
context.strokeStyle = 'gray'
context.lineWidth = 5;
context.stroke();
//sun
context.beginPath();
context.arc(0, 0, 100, 4 * Math.PI, 1 * Math.PI, false);
context.fillStyle = 'yellow';
context.fill();
context.lineWidth = 2;
context.strokeStyle = 'black';
context.stroke();
//cloud
// begin custom shape
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
// complete custom shape
context.closePath();
context.lineWidth = 5;
context.fillStyle = "white";
context.fill();
context.strokeStyle = "#8ED6FF";
context.stroke();
//roof
// miter line join (left)
context.beginPath();
context.moveTo(150, 255);
context.lineTo(415, 50);
context.lineTo(650, 255);
context.strokeStyle = 'black';
context.fillStyle = 'red';
context.fill();
context.lineJoin = "miter";
context.stroke();
//door
context.beginPath();
context.rect(350, 325, 100, 150);
context.fillStyle = 'purple';
context.fill();
context.stroke();
//door knob
context.beginPath();
context.arc(430, 400, 2, 0 , 2 * Math.PI, false);
context.stroke();
//windows
context.beginPath();
context.arc(250, 350, 30, 0 , 2 * Math.PI, false);
context.fillStyle = 'white';
context.fill();
context.stroke();
//windows
context.beginPath();
context.arc(550, 350, 30, 0 , 2 * Math.PI, false);
context.fillStyle = 'white';
context.fill();
context.stroke();
//sun rays
context.beginPath();
context.moveTo(100,15);
context.lineTo(150,75);
context.strokeStyle = 'yellow';
context.stroke();
//sun rays
context.beginPath();
context.moveTo(80,65);
context.lineTo(150,150);
context.stroke();
//sun rays
context.beginPath();
context.moveTo(40,95);
context.lineTo(97,185);
context.stroke();
//sun rays
context.beginPath();
context.moveTo(16,105);
context.lineTo(30,200);
context.stroke();
//window lines
context.beginPath();
context.moveTo(550,320);
context.lineTo(550,380);
context.strokeStyle = 'black';
context.stroke();
//window lines
context.beginPath();
context.moveTo(250,320);
context.lineTo(250,380);
context.strokeStyle = 'black';
context.stroke();
//window lines
context.beginPath();
context.moveTo(222,354);
context.lineTo(277,354);
context.strokeStyle = 'black';
context.stroke();
//window lines
context.beginPath();
context.moveTo(522,354);
context.lineTo(577,354);
context.strokeStyle = 'black';
context.stroke();
//birds
context.beginPath();
context.moveTo(599, 125);
context.lineTo(650, 150);
context.lineTo(699, 125);
context.lineJoin = "miter";
context.strokeStyle = 'black'
context.stroke();
//birds
context.beginPath();
context.moveTo(699, 25);
context.lineTo(750, 50);
context.lineTo(799, 25);
context.lineJoin = "miter";
context.strokeStyle = 'black'
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment