Friday, 18 November 2016

Hut Using HTML

Hut Using HTML

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>

Download HTML File