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

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></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></canvas> </body> </html>

代码显示的结果：