1 <canvas id="c1" width="400" height="400" style="background-color:red"> 2 </canvas> 3 4 <script type="text/javascript"> 5 //获取画布元素 6 var canvas=document.getElementById("c1"); 7 //绘制环境（我称为“画笔”） 8 var cxt=canvas.getContext("2d"); 9 10 //绘制路径 11 cxt.beginPath();//开始绘制路径 12 cxt.moveTo(20,20);//起点 13 cxt.lineTo(20,120);//下一个点 14 cxt.lineTo(50,50); 15 cxt.closePath();//结束绘制路径 16 17 //路径设置完成，页面中不会显示。需要设置它的绘制方式 18 19 cxt.stroke();//画线 20 21 //绘制路径 22 cxt.beginPath();//开始绘制路径 23 cxt.moveTo(60,20);//起点 24 cxt.lineTo(60,120);//下一个点 25 cxt.lineTo(90,50); 26 cxt.closePath();//结束绘制路径 27 28 //路径设置完成，页面中不会显示。需要设置它的绘制方式 29 30 cxt.fill();//填充 31 32 //改变颜色 33 cxt.strokeStyle="#3366cc"; 34 cxt.fillStyle="#ffff00"; 35 36 //绘制路径 37 cxt.beginPath();//开始绘制路径 38 39 cxt.moveTo(20,220);//起点 40 cxt.lineTo(20,320);//下一个点 41 cxt.lineTo(50,250); 42 cxt.closePath();//结束绘制路径 43 44 //路径设置完成，页面中不会显示。需要设置它的绘制方式 45 46 cxt.stroke();//画线 47 48 //绘制路径 49 cxt.beginPath();//开始绘制路径 50 cxt.moveTo(60,220);//起点 51 cxt.lineTo(60,320);//下一个点 52 cxt.lineTo(90,250); 53 cxt.closePath();//结束绘制路径 54 55 //路径设置完成，页面中不会显示。需要设置它的绘制方式 56 57 cxt.fill();//填充 58 </script>
效果图：
【新知识点】：
1、beginPath():开始绘制路径
2、closePath():结束绘制路径
3、moveTo(x,y):起点坐标
4、lineTo(x,y):下一点坐标
5、stroke():画线
6、fill():填充
【注意】：
fillStyle:只对填充图形有效
strokeStyle:只对画线图形有效