Drawing house

最新推荐文章于 2021-09-21 23:29:16 发布

转载最新推荐文章于 2021-09-21 23:29:16 发布 · 96 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/liuwei-0313/p/10025819.html

本文通过HTML5的Canvas API详细介绍了如何使用JavaScript绘制一个简单的房屋图案，并添加了窗户、门和文字说明，展示了Canvas的基本绘图功能。

截图如下：

代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 <title>Drawing house</title>
 7 </head>
 8 <body>
 9 <canvas id="myCanvas" width="650" height="550"  style="border:1px solid"></canvas>
10 <script>
11 var c = document.getElementById("myCanvas");
12 var ctx = c.getContext("2d");
13 ctx.fillStyle = "#9FFFFFFF";
14 ctx.fillRect(25,275,600,250);
15 
16 // Draw triangle
17 ctx.fillStyle="#FFFFDBFF";
18 ctx.beginPath();
19 ctx.moveTo(325,25);
20 ctx.lineTo(25,275);
21 ctx.lineTo(635,275);
22 ctx.closePath();
23 ctx.fill();
24 
25 //windows
26 ctx.fillStyle="#FF7FEDFF";
27 ctx.fillRect(50,400,200,100);
28 ctx.fillStyle="#FFD800FF";
29 ctx.fillRect(52,402,96,46);
30 ctx.fillRect(152,402,96,46);
31 ctx.fillRect(52,452,96,46);
32 ctx.fillRect(152,452,96,46);
33 
34 //door
35 ctx.fillStyle = "#754719";
36 ctx.fillRect(300,375,100,150);
37 
38 //door knob
39 ctx.beginPath();
40 ctx.fillStyle = "#F2F2F2";
41 ctx.arc(325,400,3,0,2*Math.PI);
42 ctx.fill();
43 ctx.closePath();
44 
45 //Text on the Right
46 ctx.font="40px Veranda";
47 ctx.fillText("Hello",425,350);
48 ctx.font="30px Veranda";
49 ctx.fillText("LiuWei",425,390);
50 ctx.fillText("Canvas",425,420);
51 </script>
52 </body>
53 </html>

转载于:https://www.cnblogs.com/liuwei-0313/p/10025819.html