HTML5 Canvas arc()函数 八卦图示例
2018-11-17 PM 01:11.来自互联网





(阅览)Read 19206
(调整字号)Size
实例
创建一个圆形:

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 说明:

八卦图示例代码:
程序效果如下:

无标题文档
-
设计入门推荐:7 本最佳 UX 设计书籍 2022-02-26 PM 04:31.
-
网站优化有哪些细节容易忽视,怎么做才有效 2022-02-12 PM 06:47.
-
2020复工通知 2020-02-10 AM 09:00.
-
六个营销必懂的心理学效应 2019-06-29 PM 03:44.