Canvas进修笔记（四）_H5之家 - 中国HTML5教程资源分享第一站

Canvas进修笔记（四）--画图（路径【弧线】）发布时间：2012-03-09 发布来源：

？

生命的几许用时候策画，生命的价值用供献策画。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> ?

代码显示的成果：

?裴多菲

《更多网站建设信息、网站开发资讯，敬请咨询百微信息科技，021-57700304》