HTML画布：画圆

马黑黑 · 发表于 2022-3-1 08:43

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

要在canvas画布上画圆，需要用到 arc() 方法。arc 一词是弧形、做弧形运动之意，在此引申为画弧。画圆的思路就是画一个闭合的弧，因此必须先弄清 arc() 方法。

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

参数多，但容易理解：

x : 圆心的x坐标
y : 圆心的y坐标
r : 园的半径
sAngle : 即 startAngle，园的起始角（弧度单位）
eAngle : 即 endAngle，园的结束角（弧度单位）
counterclockwise : 可选参数（一般用中括号表示），是否是逆时针方向：true（是）/ false（否）

园的起始角一般定义在三点钟方向，也就是水平方向的右端，值设定为0，这是sAngle的值设定；六点钟方向是 0.5π，九点钟方向是 1π，十二点钟方向是 1.5π，结束角或称终止角在三点钟方向（这样才能闭合），那么结束角的值就是 2π了。用JS表示，2π要用到 PI 函数，且要用到 Math 方法，表示为：2*Math.PI。

故此，假如我们以（200，200）为圆心，画一个半径为100的园，不考虑画圆的方向，语法如下：

context.arc(200,200,100,0,2*Math.PI);

举个实例：

<canvas id="cvs" width="400" height="400">你的浏览器不支持画布</canvas>

<script language="javascript">

var cvs = document.getElementById('cvs'); //画布标识
var cct = cvs.getContext('2d'); // 创建2d画笔
cct.strokeStyle = "darkblue"; // 画笔颜色
cct.lineWidth = 8; // 线条粗细
cct.beginPath(); // 开启路径
cct.arc(200,200,100,0,2*Math.PI); // 用 arc 方法设置园
cct.stroke(); // 将上面设定画出来

</script>

如果需要画实心圆，则在已有设定的基础上补充：① 先用 fillStyle 设定填充颜色（不设定默认用黑色）：

cct.fillStyle = "tomato"; //定义填充色

② 再用 fill() 方法给圆着上底色：

cct.fill(); // 画（填充）圆

这时，cct.stroke 可以去掉，没有它圆一样画出来。如果不需要边框，可将边框相关的 strokeStyle 和 lineWidth 两句去掉，但一定不可以缺少 arc 方法那句，它是画圆的关键。