1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>绘制直线</title>
6 </head>
7 <body>
8 <canvas id="canvas" style="border:1px solid #aaa; display:block;margin:30px auto;">
9 当前浏览器不支持Canvas,请更换浏览器
10 </canvas>
11 <script>
12 var canvas=document.getElementById('canvas');
13 canvas.width=1024;
14 canvas.height=768;//也可以在这里设置width和height
15 var context=canvas.getContext('2d');
16 //使用context进行绘制
17
18 context.moveTo(100,100);
19 context.lineTo(700,700);
20 context.lineTo(100,700);
21 context.lineTo(100,100);
22 context.lineWidth=5;
23 context.strokeStyle="#005588";
24 context.stroke();
25 </script>
26 <!--
27 1.context.moveTo(100,100);和context.lineTo(700,700);//状态设置
28 2.context.stroke();//绘制
29 3.context.lineWidth=5;//设置线条的宽度
30 4.context.strokeStyle="#005588";//线条样式，主要指颜色
31 -->
32 </body>
33 </html>
