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>