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 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 47 48 </script> 49 </body> 50 </html>
效果图：
主要运用几个函数：
moveTo(x,y)：将“画笔”放到某一个位置(x,y)准备画
lineTo(x1,y1)：从moveTo()定义的(x,y)开始一直画到lineTo()定义的(x1,y1)地方
stroke():画线
beginPath()：路径开始
closePath()：关闭路径
原文：http://www.cnblogs.com/hongrunhui/p/5188396.html