CREATE HUT USING A LINE (CANVAS) MUST WATCH

CREATE HUT USING A LINE (CANVAS)

Code

<!DOCTYPE HTML>
<HTML>
<HEAD>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({
    google_ad_client: "ca-pub-9961622779713084",
    enable_page_level_ads: true
  });
</script>
<TITLE> CREATING A HUT</TITLE>
</HEAD>
<BODY>
<canvas id="gameCanvas" width="700" height="300" Style="border:2px solid black">
</canvas>
<SCRIPT>
var c=document.getElementById("gameCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(150,100);
ctx.lineTo(150,40); <!--3
ctx.stroke();

ctx.moveTo(150,100) <!--4 left side up-->
ctx.lineTo(50,100); <!--right side up-->
ctx.stroke();
ctx.moveTo(150,40);<!--2-->
ctx.lineTo(100,00);
ctx.stroke();
ctx.moveTo(48,40);<!--5--> left side triangle
ctx.lineTo(100,00);
ctx.stroke();
ctx.moveTo(50,100);<!--6 line adjust--> left side square
ctx.lineTo(50,40);
ctx.stroke();
ctx.moveTo(300,40);<!--7 line adjust--> traingle lower
ctx.lineTo(50,40);
ctx.stroke();
ctx.moveTo(170,-10);<!--8 line adjust--> top rectangle
ctx.lineTo(80,0);
ctx.stroke();
ctx.moveTo(150,100)<!--9 line adjust-->
ctx.lineTo(300,100);
ctx.stroke();
ctx.moveTo(200,-20);<!--10 line adjust-->
ctx.lineTo(300,40);
ctx.stroke();
ctx.moveTo(300,40);<!--11 line adjust-->
ctx.lineTo(300,100);
ctx.stroke();
ctx.moveTo(80,60);<!--12 line adjust-->
ctx.lineTo(80,100);
ctx.stroke();
ctx.moveTo(80,60)<!--13;line adjust-->
ctx.lineTo(100,60);
ctx.stroke();
ctx.moveTo(100,60);<!--14 line adjust-->
ctx.lineTo(100,100);
ctx.stroke();

</SCRIPT>
</BODY>
</HTML>

Result:

About Codingwelove

Codingwelove
Recommended Posts × +

0 comments:

Post a Comment