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、关于弧度的说明
?
?相信看过图后，就很好理解了。
?
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 onload="draw();"><canvas id="test" width="200px" height="200px" alt="Canvas学习札记(四)-绘图（路径【弧线】）">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 onload="draw();"><canvas id="test" width="200px" height="200px" alt="Canvas学习札记(四)-绘图（路径【弧线】）">?
衣架这个确实是抄袭的。
