今天来个画布的讲解，对于画布你们了解多少呢。
Canvas他是使用 JavaScript 来绘制图像的，canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。
在画布的流程中大致是这样：
1、’先获取画布canvas；
2、创建2d画布；
3、开始 X.beginPath();
4、开始坐标 X.moveTo(X,Y);
5、结束坐标 X.lineTo(X,Y)
4、过渡 X.stroke();
5、结束 X.closePath();
首先来个简单的表格的制作：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <canvas id="ca" width="300px" height="300px" style="300px;height:300px;border: 1px solid black"></canvas><!--canvas【画布】==========宽高必须在style外设*/--> 9 <script>//=====相当于笔 10 // 1、获取 11 var ca=document.querySelector("#ca"); 12 w=ca.width;//画布的宽 13 h=ca.height;//画布的高 14 var X=ca.getContext("2d"); 15 for(var i=0;i<7;i++){ 16 X.beginPath(); 17 X.moveTo(h/6*i,0); 18 X.lineTo(h/6*i,w); 19 X.stroke(); 20 X.strokeStyle='red'; 21 X.closePath(); 22 23 X.beginPath(); 24 X.moveTo(0,h/6*i); 25 X.lineTo(w,h/6*i); 26 X.stroke(); 27 X.strokeStyle="yellow"; 28 X.closePath(); 29 } 30 X.beginPath(); 31 X.fillStyle="red"; 32 x.strokeStyle='red'; 33 X.moveTo(10,10); 34 X.lineTo(100,100); 35 X.lineTo(10,100); 36 X.lineTo(10,10); 37 X.fill(); 38 X.stroke(); 39 X.closePath(); 40 41 42 43 44 45 </script> 46 </body> 47 </html>
再看看我画的太极吧：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <canvas width="300px" height="300px" style="border: 1px solid"></canvas> <script> var ca=document.querySelector("canvas"); var x=ca.getContext("2d"); x.beginPath(); // 两个大圆相交 x.fillStyle="white"; x.arc(150,150,150,0,180*Math.PI/180,false); x.fill(); x.stroke(); x.closePath(); x.beginPath(); x.fillStyle="black"; x.arc(150,150,150,0,180*Math.PI/180,true); x.fill(); x.stroke(); x.closePath(); //两个小圆 x.beginPath(); x.restore(90*Math.PI/180); x.fillStyle="black"; x.arc(76,150,75,0,180*Math.PI/180); x.fill(); x.stroke(); x.closePath(); x.beginPath(); x.restore(90*Math.PI/180); x.fillStyle="white"; x.arc(76,150,20,0,360*Math.PI/180); x.fill(); x.stroke(); x.closePath(); x.beginPath(); x.fillStyle="white"; x.arc(227,150,75,0,180*Math.PI/180,true); x.fill(); x.stroke(); x.closePath(); x.beginPath(); x.fillStyle="black"; x.arc(227,150,20,0,360*Math.PI/180); x.fill(); x.stroke(); x.closePath(); </script> </body> </html>