html5 canvas 圆圈,使用HTML5 Canvas arc()绘制圆形/圆环

前段时间的一个项目做到这个玩意，研究了一下绘制圆环的方法。最终使用HTML5的画布标签来做。arc()是HTML5 Canvas的一个API函数，作用是“创建弧/曲线(用于创建圆形或部分圆)”。本文先讲解如何绘制圆形以及一些应用。

1. javascript 语法

context.arc(x,y,r,sAngle,eAngle,counterclockwise);

2. 参数值

参数

描述

x

圆的中心的 x 坐标。

y

圆的中心的 y 坐标。

r

圆的半径。

sAngle

起始角，以弧度计。(弧的圆形的三点钟位置是 0 度)。

eAngle

结束角，以弧度计。

counterclockwise

可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。

3. 图解

提示：如需通过 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)

4. 实例

创建一个圆形：

JavaScript:

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

5. 延伸案例

我们用6个图形组合成一个八卦的图形。

无标题文档

✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦

原文：前端博客

http://caibaojian.com/html5-canvas-arc.html

点击“阅读原文”，看更多

精选文章

↓↓↓