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