HTML5 Canvas arc()函数 八卦图示例

2018-11-17 PM 01:11.来自互联网

(阅览)Read 1444

(调整字号)Size

16px 14px 12px

实例

创建一个圆形:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();



浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 arc() 方法。

注释:Internet Explorer 8 或更早的浏览器不支持元素。


定义和用法

arc() 方法创建弧/曲线(用于创建圆或部分圆)。

提示:如需通过 arc() 来创建圆,请把起始角设置为 0,结束角设置为 2*Math.PI。

提示:请使用 stroke() 或 fill() 方法在画布上绘制实际的弧。


中心:arc(100,75,50,0*Math.PI,1.5*Math.PI)

起始角:arc(100,75,50,0,1.5*Math.PI)

结束角:arc(100,75,50,0*Math.PI,1.5*Math.PI)



如果要创建一个圆形,我们可以使用arc()方法。

语法:arc(定义一个中心点,半径,起始角度,结束角度,和绘图方向:顺时针或逆时针)

代码:context.arc(centerX, centerY, radius, startingAngle, endingAngle, antiClockwise);


HTML5 Canvas Arc 说明:




八卦图示例代码:


程序效果如下:



无标题文档



0371/8622 0001

weekdays :   -am. 09:00-11:30
-pm.14:00-18:30 Open Hours

中国郑州 郑东新区金水东路与中兴路交汇处楷林IFC /A座 -17F-1713

Room1713 Building A,Kineer IFC,JinShui East Rd.
Zhengdong New Area,Henan,China