HTML 5 supports graphics by Canvas and SVG.
Canvas
Canvas is a rectangular area specified by height and width where you can make drying using line,circle and many more . Following example create a hut using HTML canvas and line.Hut Using HTML
<html>
<head>
<title>Graphics HTML : Girfa </title>
</head>
<body>
<canvas id="myCanvas"
width="700"
height="500"
style="border:1px
solid #000000;">
Your
browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd =
ctx.createLinearGradient(0,0,700,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle
= grd;
ctx.fillRect(0,0,700,500);
ctx.moveTo(50,450);
ctx.lineTo(50,200);
ctx.stroke();
ctx.moveTo(50,200);
ctx.lineTo(150,100);
ctx.stroke();
ctx.moveTo(150,100);
ctx.lineTo(250,220);
ctx.stroke();
ctx.moveTo(150,100);
ctx.lineTo(600,140);
ctx.stroke();
ctx.moveTo(250,220);
ctx.lineTo(650,210);
ctx.stroke();
ctx.moveTo(650,210);
ctx.lineTo(600,140);
ctx.stroke();
ctx.moveTo(630,210);
ctx.lineTo(630,400);
ctx.stroke();
ctx.moveTo(240,210);
ctx.lineTo(240,450);
ctx.stroke();
ctx.moveTo(240,450);
ctx.lineTo(50,450);
ctx.stroke();
//Door
ctx.moveTo(240,450);
ctx.lineTo(630,400);
ctx.stroke();
ctx.moveTo(100,450);
ctx.lineTo(100,300);
ctx.stroke();
ctx.moveTo(100,300);
ctx.lineTo(180,300);
ctx.stroke();
ctx.moveTo(180,300);
ctx.lineTo(180,450);
ctx.stroke();
//Window
ctx.moveTo(360,280);
ctx.lineTo(360,380);
ctx.stroke();
ctx.moveTo(360,380);
ctx.lineTo(500,365);
ctx.stroke();
ctx.moveTo(360,280);
ctx.lineTo(500,285);
ctx.stroke();
ctx.moveTo(500,285);
ctx.lineTo(500,365);
ctx.stroke();
</script>
</body>
</html>
No comments:
Post a Comment