标签：order document lan canvas selector 大致 使用 rest tle
今天来个画布的讲解，对于画布你们了解多少呢。
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>
标签：order document lan canvas selector 大致 使用 rest tle
原文地址：http://www.cnblogs.com/yhyanjin/p/7100885.html
