Canvas学习笔记(四)--绘图（路径【弧线】）

lib · 发表于 2013-1-24 06:37:07

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、关于弧度的说明

相信看过图后，就很好理解了。

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> 代码显示的结果：

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>
代码显示的结果：

		自动登录	找回密码
密码			立即注册