畫布Canvas的使用方法
阿新 • • 發佈：2017-07-01
javascrip 繪圖 utf-8 col 獲取 ava ext spa 內部
今天來個畫布的講解，對於畫布你們了解多少呢。
Canvas他是使用 JavaScript 來繪制圖像的，canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須在 JavaScript 內部完成。
在畫布的流程中大致是這樣：
1、’先獲取畫布canvas；
2、創建2d畫布；
3、起始點
4、過渡；
5、結尾點；
來看看我畫的太極吧：
<!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>
畫布Canvas的使用方法