HTML画布：画圆
要在canvas画布上画圆，需要用到 arc() 方法。arc 一词是弧形、做弧形运动之意，在此引申为画弧。画圆的思路就是画一个闭合的弧，因此必须先弄清 arc() 方法。context.arc(x,y,r,sAngle,eAngle,);
参数多，但容易理解：
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 方法那句，它是画圆的关键。
<canvas id="cvs" width="400" height="400">你的浏览器不支持画布</canvas>
<script language="javascript">
var cvs = document.getElementById('cvs');
var cct = cvs.getContext('2d');
cct.strokeStyle = "darkblue";
cct.lineWidth = 8;
cct.beginPath();
cct.arc(200,200,100,0,2*Math.PI);
cct.stroke();
</script>
谢谢黑黑，这个画布能画的东西还不少呢{:4_204:} 0度是从哪开始起算的？ <canvas id="hy" width="400" height="400">你的浏览器不支持画布</canvas>
<script language="javascript">
var cvs = document.getElementById('hy');
var cct2 = cvs.getContext('2d');
cct2.strokeStyle = "red";
cct2.lineWidth = 6;
cct2.beginPath();
cct2.arc(200,200,100,0.1745,1.0472);
cct2.stroke();
</script> 我画的是10-60度，知道了，基础度数是圆点向右手方向顺时针起算的。 为什么不能叠在一起？本来想把这红色圆弧放在蓝色圆环上，复制了两段代码放一起根本就不显示了。 <canvas id="hy1" width="400" height="400">你的浏览器不支持画布</canvas>
<script language="javascript">
var cvs = document.getElementById('hy1');
var hy2 = cvs.getContext('2d');
hy2.strokeStyle = "darkblue";
hy2.lineWidth = 8;
hy2.beginPath();
hy2.arc(200,200,100,200/180*Math.PI,340/180*Math.PI);
hy2.stroke();
</script> 看到有2*的算式存在，果然用/可以是除号。算式可以用很方便，不用先去算好弧度了。 这个好像不能像画线段一样，在同一个画布上画多个不同圆弧。 红影 发表于 2022-3-1 11:13
这个好像不能像画线段一样，在同一个画布上画多个不同圆弧。
可以的，圆心设定好了就可以 马黑黑 发表于 2022-3-1 11:38
可以的，圆心设定好了就可以
哦哦，或者改变半径也行的吧。 这个园还可以：另存为。。。。。老黑厉害。{:4_199:} 本帖最后由 加林森 于 2022-3-1 20:49 编辑 <br /><br />画不出来呢？{:4_203:} 加林森 发表于 2022-3-1 20:43
本帖最后由 加林森 于 2022-3-1 20:49 编辑 画不出来呢？
id是唯一的 马黑黑 发表于 2022-3-1 20:58
id是唯一的
改天好好学习一下，这个一下还搞不定的。 红影 发表于 2022-3-1 20:23
哦哦，或者改变半径也行的吧。
要结合圆心 加林森 发表于 2022-3-1 21:01
改天好好学习一下，这个一下还搞不定的。
对你来说是全新的东东，应用场景也不见得合适，加之必须与JS配套，难度很大 马黑黑 发表于 2022-3-1 21:06
对你来说是全新的东东，应用场景也不见得合适，加之必须与JS配套，难度很大
就是就是，所以这个得好好去研究了。 红影 发表于 2022-3-1 10:30
0度是从哪开始起算的？
原帖讲过的：三点钟方向。但画弧，可以自己定义，不一定从0开始