Thursday, July 25, 2013
Tuesday, July 16, 2013
HTML 5 CANVAS
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> here goes the title of your project </title>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> start here
//SKY
context.beginPath();
context.rect(0,0,800,600);
context.fillStyle = "rgb(80,170,255)";
context.fill();
context.closePath();
//GRASS
context.beginPath();
context.rect(0,360,800,360);
context.fillStyle = "green";
context.fill();
context.closePath();
//SUN
context.beginPath();
context.arc(40,0,122,0,3.15, false);
context.fillStyle = "yellow";
context.fill();
context.closePath();
//SUN LINE #1
context.beginPath();
context.moveTo(20,120);
context.lineTo(20,180);
context.lineWidth = 4;
context.stroke();
context.closePath();
//SUN LINE #2
context.beginPath();
context.moveTo(90,112);
context.lineTo(100,135);
context.stroke();
context.closePath();
//SUN LINE #3
context.beginPath();
context.moveTo(140,70);
context.lineTo(200,105);
context.stroke();
context.closePath();
//SUN LINE #4
context.beginPath();
context.moveTo(161,15);
context.lineTo(185,15);
context.stroke();
context.closePath;
//TREE TRUNK
context.beginPath();
context.rect(130,250,25,130);
context.fillStyle = "brown";
context.fill();
context.closePath;
//TREE TOP
context.beginPath();
context.moveTo(143,200);
context.bezierCurveTo(150,0,400,300,145,225);
context.bezierCurveTo(400,300,150,400,143,250);
context.bezierCurveTo(136,400,0,300,135,225);
context.bezierCurveTo(0,300,136,0,143,200);
context.fillStyle = "green";
context.fill();
context.stroke();
context.closePath();
//POND
context.beginPath();
context.moveTo(400,400);
context.bezierCurveTo(550,340,700,400,700,460);
context.bezierCurveTo(650,600,490,500,400,550);
context.bezierCurveTo(100,625,100,390,200,370);
context.bezierCurveTo(300,340,275,475,400,400);
context.fillStyle = "blue";
context.fill();
context.stroke();
context.closePath();
//BIRD #1 WING #1
context.beginPath();
context.moveTo(200,50);
context.quadraticCurveTo(225,20,250,50);
context.stroke();
context.closePath();
//BIRD #1 WING #2
context.beginPath();
context.moveTo(250,50);
context.quadraticCurveTo(275,20,300,50);
context.stroke();
context.closePath();
//BIRD #2 WING #1
context.beginPath();
context.moveTo(275,75);
context.quadraticCurveTo(300,40,325,75);
context.stroke();
context.closePath();
//BIRD #2 WING #2
context.beginPath();
context.moveTo(325,75);
context.quadraticCurveTo(350,40,375,75);
context.stroke();
context.closePath();
//BASKET FOR BALLOON
context.beginPath();
context.rect(500,250,75,50);
context.fillStyle = "tan";
context.fill();
context.lineWidth = 4;
context.stroke();
context.closePath();
//LINE #1 FOR BALLOON BASKET
context.beginPath();
context.moveTo(500,250);
context.lineTo(575,300);
context.stroke();
context.closePath();
//LINE #2 FOR BALLOON BASKET
context.beginPath();
context.moveTo(575,250);
context.lineTo(500,300);
context.stroke();
context.closePath();
//BALLOON
context.beginPath();
context.moveTo(500,200);
context.bezierCurveTo(400,0,675,0,575,200);
context.fillStyle = "red";
context.fill();
context.stroke();
context.closePath();
//BALLOON LINE
context.beginPath();
context.moveTo(500,200);
context.lineTo(575,200);
context.stroke();
context.closePath();
//BALLOON STRING #1
context.beginPath();
context.moveTo(500,200);
context.lineTo(537.5,250);
context.stroke();
context.closePath();
//BALLOON STRING #2
context.beginPath();
context.moveTo(537.5,200);
context.lineTo(537.5,250);
context.stroke();
context.closePath();
//BALLOON STRING #3
context.beginPath();
context.moveTo(575,200);
context.lineTo(537.5,250);
context.stroke();
context.closePath();
// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Subscribe to:
Posts (Atom)