canvas画简单电路图

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <canvas id="can1" width="500" height="400" style="margin: 20px auto"></canvas>
 9 </body>
10 <script>
11         var canvas = document.getElementById("can1");
12         var cxt = canvas.getContext("2d");
13         
14         cxt.moveTo(10,10);
15         cxt.lineTo(100,10);
16         cxt.stroke();
17         cxt.beginPath();
18         cxt.moveTo(100,10);
19         cxt.lineTo(100,0);
20         cxt.lineTo(150,0);
21         cxt.lineTo(150,20);
22         cxt.lineTo(100,20);
23         cxt.closePath();
24         cxt.moveTo(150,10);
25         cxt.lineTo(250,10);
26         cxt.lineTo(250,100);
27         cxt.stroke();
28         cxt.moveTo(225,100);
29         cxt.lineTo(275,100);
30         cxt.stroke();
31         cxt.moveTo(225,115);
32         cxt.lineTo(275,115);
33         cxt.stroke();
34         cxt.moveTo(250,115);
35         cxt.lineTo(250,160);
36         cxt.stroke();
37         cxt.moveTo(250,160);
38         cxt.lineTo(150,160);
39         cxt.stroke();
40         cxt.arc(130,160,20,0,360,false);
41         cxt.stroke();
42         cxt.moveTo(150,160);
43         cxt.lineTo(10,160);
44         cxt.lineTo(10,10);
45         cxt.stroke();
46     </script>
47 </html>

效果图:

 

主要运用几个函数:

moveTo(x,y):将“画笔”放到某一个位置(x,y)准备画

lineTo(x1,y1):从moveTo()定义的(x,y)开始一直画到lineTo()定义的(x1,y1)地方

stroke():画线

beginPath():路径开始

closePath():关闭路径

转载于:https://www.cnblogs.com/hongrunhui/p/5188396.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值