INTERACTIVE MEDIA DESIGN EXERCISE 10: CANVAS DRAWING
HERE IS THE HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title>HOUSE</title>
</head>
<body>
<canvas id=pane width=700 height=600 style="border:1px solid #000000;"></canvas>
<script>
var c = document.getElementById('pane').getContext('2d');
//house base
c.fillStyle = "darkkhaki";
c.fillRect(200, 200, 300, 200);
//door
c.fillStyle = "brown";
c.fillRect(325, 275, 50, 125);
//left window
c.fillStyle = "skyblue";
c.fillRect(225, 275, 50, 50);
//window frame
c.beginPath();
c.strokeStyle = "white";
c.moveTo(250, 275 );
c.lineTo(250, 325);
c.stroke();
c.beginPath();
c.strokeStyle = "white";
c.moveTo(225, 300);
c.lineTo(275, 300);
c.stroke();
//right window
c.fillStyle = "skyblue";
c.fillRect(425, 275, 50, 50);
//window frame
c.beginPath();
c.strokeStyle = "white";
c.moveTo(425, 300);
c.lineTo(475, 300);
c.stroke();
c.beginPath();
c.strokeStyle = "white";
c.moveTo(450, 275);
c.lineTo(450, 325);
c.stroke();
//roof
c.beginPath();
c.strokeStyle = "black";
c.fillStyle = "slategray";
c.moveTo(200, 200);
c.lineTo(350, 75);
c.lineTo(500, 200);
c.lineTo(200, 200);
c.stroke();
c.fill();
//doorknob
c.beginPath();
c.strokeStyle = "black";
c.fillStyle = "gold";
c.arc(335,335,5, 0, 2*Math.PI);
c.stroke();
c.fill();
//grass
var grd=c.createLinearGradient(0, 350, 700, 600);
grd.addColorStop(0,"yellowgreen");
grd.addColorStop(1,"green");
c.fillStyle=grd;
c.fillRect(0, 400, 700, 600);
//Sun
c.beginPath();
c.strokeStyle = "yellow";
c.fillStyle = "yellow";
c.arc(600,100,50,0,2*Math.PI);
c.stroke();
c.fill();
for (var i = 0; i < 8; i = i + 1) {
for (var j = 0; j < 6; j = j + 1) {
fillStar(i * size, j * size, size);
}
}
function fillStar(x, y, s) {
c.save();
c.translate(70, 90);
c.beginPath();
c.moveTo(x, y + s * 0.4);
c.lineTo(x + s, y + s * 0.4);
c.lineTo(x + s * 0.15, y + s * 0.9);
c.lineTo(x + s / 2, y);
c.lineTo(x + s * 0.85, y + s * 0.9);
c.lineTo(x, y + s * 0.4);
c.fill();
c.restore();
}
// garden brick or mouse hole if not completed.
c.beginPath();
c.fillStyle = "black";
c.arc(300, 400, 12, 3.1, Math.PI*2.005);
c.closePath();
c.lineWidth = 5;
c.fill();
// walkway
c.beginPath();
c.fillStyle = "grey";
c.strokeStyle = "grey";
c.moveTo(325, 400);
c.lineTo(330, 475);
c.lineTo(370, 525);
c.lineTo(375, 600);
c.lineTo(425, 600);
c.lineTo(420, 525);
c.lineTo(380, 475);
c.lineTo(375, 400);
c.lineTo(325, 400);
c.stroke();
c.fill();
</script>
</body>
</html>
Comments
Post a Comment