Canvas学习笔记(四)--绘图（路径【弧线】）
1、绘制弧线的方法arc(x, y, radius, startAngle, endAngle, anticlockwise)
x，y：圆心的坐标；
radius：圆心的半径；
startAngle：起始弧度（以横轴X为标准）；
endAngle：终止弧度（以横轴X为标准）；
anticlockwise： true表示逆时针，false表示顺时针；
注：arc方法中用到的角度是以弧度为单位，而不是度。
转换公式：var radians = (Math.PI/180)*degrees;
2、关于弧度的说明
http://dl.iteye.com/upload/attachment/0064/5431/ec35a361-1f34-3b8e-8120-ea37a47a206c.png
相信看过图后，就很好理解了。
3、绘图实例--笑脸
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css">.wraper {position: relative;border: 1px solid orange;}</style><script type="text/javascript">function draw(){var can = document.getElementById('test');if(can.getContext){var cxt = can.getContext('2d');cxt.beginPath();cxt.arc(100,100,80,0,Math.PI*2,true);cxt.moveTo(160,100);cxt.arc(100,100,60,0,Math.PI,false);cxt.moveTo(85,75);cxt.arc(75,75,10,0,Math.PI*2,false);cxt.moveTo(115,75);cxt.lineTo(135,75);cxt.stroke();}}</script></head> <body ><canvas id="test" width="200px" height="200px" class="wraper"></canvas></body></html> 代码显示的结果：
http://dl.iteye.com/upload/attachment/0064/5487/fbb4a75c-d0ae-3f06-b061-aaf9792b2170.png
4、绘图实例--衣架
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css">.wraper {position: relative;border: 1px solid orange;}</style><script type="text/javascript">function draw(){var can = document.getElementById('test');if(can.getContext){var cxt = can.getContext('2d');cxt.beginPath();cxt.arc(100,30,15,Math.PI,Math.PI*0.5,false);cxt.lineTo(100,65);cxt.lineTo(30,100);cxt.arc(30,115,15,Math.PI*1.5,Math.PI*0.5,true);cxt.lineTo(170,130);cxt.arc(170,115,15,Math.PI*0.5,Math.PI*1.5,true);cxt.lineTo(100,65);cxt.stroke();cxt.closePath();}}</script></head> <body ><canvas id="test" width="200px" height="200px" class="wraper"></canvas></body></html>
代码显示的结果：
http://dl.iteye.com/upload/attachment/0064/5491/3405cb03-cb6a-3d87-a56f-123130294420.png
页:
[1]