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()：关闭路径