<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
// background
// sky
context.beginPath();
context.rect(0,0,800,400);
// add Linear Gradient
var grd = context.createLinearGradient(400, 0, 400, 400);
// dark blue
grd.addColorStop(0, "RGB(8, 103, 246)");
// light blue
grd.addColorStop(1, "RGB(106, 216, 250)");
context.fillStyle = grd;
context.fill();
context.stroke();
// grass
context.beginPath();
context.rect(0,400,800,200);
// add Linear Gradient
var grd = context.createLinearGradient(400, 400, 400, 600);
// dark green
grd.addColorStop(0, "RGB(0, 102, 51)");
// light green
grd.addColorStop(1, "RGB(0, 173, 56)");
context.fillStyle = grd;
context.fill();
context.stroke();
// sun
context.beginPath();
context.arc(0, 0, 100, 0, 2 * Math.PI, false);
// add Radial Gradient
var grd = context.createRadialGradient(0, 0, 30, 0, 0, 100);
grd.addColorStop(0, "#EF6439");
grd.addColorStop(0.33, "#F6911D");
grd.addColorStop(0.67, "#EFC539");
grd.addColorStop(1, "#FCDB71");
context.fillStyle = grd;
context.fill();
context.stroke();
// house
// first square
context.beginPath();
context.rect(450,350,100,100);
context.fillStyle = '#E4D4B6';
context.fill();
context.stroke();
// first roof
context.beginPath();
context.moveTo(450, 350);
context.lineTo(625, 200);
context.lineTo(625, 350);
context.lineTo(450, 350);
context.fillStyle = '#404040';
context.fill();
context.stroke();
// third roof
context.beginPath();
context.moveTo(800, 350);
context.lineTo(625, 200);
context.lineTo(625, 350);
context.lineTo(800, 350);
context.fillStyle = '#404040';
context.fill();
context.stroke();
// third square
context.beginPath();
context.rect(700,350,100,100);
context.fillStyle = '#E4D4B6';
context.fill();
context.stroke();
// chimney
context.beginPath();
context.rect(660,200,40,100);
context.fillStyle = '#521616';
context.fill();
context.stroke();
// second square
context.beginPath();
context.rect(550,300,150,150);
context.fillStyle = '#E4D4B6';
context.fill();
context.stroke();
// second roof
context.beginPath();
context.moveTo(550, 300);
context.lineTo(625, 180);
context.lineTo(700, 300);
context.lineTo(550, 300);
context.fillStyle = '#404040';
context.fill();
context.stroke();
// door
context.beginPath();
context.rect(590,400,70,50);
context.fillStyle = '#F0ECDF';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(625,400);
context.lineTo(625,450);
context.fill();
context.stroke();
// window left
context.beginPath();
context.arc(750, 400, 25, 0, 2 * Math.PI, false);
context.fillStyle = '#FFFFFF';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(750,375);
context.lineTo(750,425);
context.fill();
context.stroke();
context.beginPath();
context.moveTo(725,400);
context.lineTo(775,400);
context.fill();
context.stroke();
// window right
context.beginPath();
context.arc(500, 400, 25, 0, 2 * Math.PI, false);
context.fillStyle = '#FFFFFF';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(500,375);
context.lineTo(500,425);
context.fill();
context.stroke();
context.beginPath();
context.moveTo(475,400);
context.lineTo(525,400);
context.fill();
context.stroke();
// window center L
context.beginPath();
context.rect(567,325,50,50);
context.fillStyle = '#FFFFFF';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(592,325);
context.lineTo(592,375);
context.fill();
context.stroke();
context.beginPath();
context.moveTo(567,350);
context.lineTo(617,350);
context.fill();
context.stroke();
// window center R
context.beginPath();
context.rect(633,325,50,50);
context.fillStyle = '#FFFFFF';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(658,325);
context.lineTo(658,375);
context.fill();
context.stroke();
context.beginPath();
context.moveTo(633,350);
context.lineTo(683,350);
context.fill();
context.stroke();
// door handles
context.beginPath();
context.moveTo(620,420);
context.lineTo(620,430);
context.fill();
context.stroke();
context.beginPath();
context.moveTo(630,420);
context.lineTo(630,430);
context.fill();
context.stroke();
// pool
// base
context.beginPath();
context.rect(368,400,82,38);
context.fillStyle = '#FAFACA';
context.fill();
context.stroke();
// water
context.beginPath();
context.rect(375,400,75,30);
// add Linear Gradient
var grd = context.createLinearGradient(400, 400, 400, 430);
// dark blue
grd.addColorStop(0, "RGB(8, 103, 246)");
// light blue
grd.addColorStop(1, "RGB(106, 216, 250)");
context.fillStyle = grd;
context.fill();
context.stroke();
// me
// neck
context.beginPath();
context.rect(246,370,10,30);
context.fillStyle = '#D5CBAD';
context.fill();
context.stroke();
// head
context.beginPath();
context.arc(250, 350, 30, 0, 2 * Math.PI, false);
context.fillStyle = '#D5CBAD';
context.fill();
context.stroke();
// dress
context.beginPath();
context.moveTo(550, 300);
context.lineTo(625, 180);
context.lineTo(700, 300);
context.lineTo(550, 300);
context.fillStyle = '#404040';
context.fill();
context.stroke();
context.beginPath();
context.rect(210,399,80,70);
context.fillStyle = '#D5CBAD';
context.fill();
context.strokeStyle = '#D5CBAD';
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment