HTML怎么做canvas画圆_HTML canvas画圆arc方法详解避坑

作者：袖梨 2026-07-28

是，必须调用 beginPath()；arc() 仅定义路径，需配合 beginPath() 隔离路径状态、fill() 或 stroke() 渲染，且 startAngle/endAngle 单位为弧度，整圆应传 0 和 2*Math.PI。

arc() 画圆必须调用 beginPath() 吗？

不强制，但漏掉 beginPath() 是绝大多数“画不出圆”或“圆连着上一条线”的根源。canvas 的路径是累积的——如果你之前画过线、矩形或别的弧，arc() 会把新圆弧接到旧路径末尾，形成意外连线。

实操建议：

每次独立绘图（包括单个圆）前都加 ctx.beginPath()
哪怕只画一个圆，也别省略；它不耗性能，但能彻底隔离路径状态
如果用 fill() 却发现整个 canvas 被填满，大概率是没 beginPath() 导致路径闭合异常

startAngle 和 endAngle 为什么不能直接写 0 和 360？

因为 arc() 的角度单位是弧度，不是度数。写 arc(100, 100, 50, 0, 360, false) 实际画的是从 0 弧度到 360 弧度（≈204°），根本不是一圈——而 2 * Math.PI 才等于完整圆周的弧度值（≈6.283）。

常见错误现象：

立即学习“前端免费学习笔记（深入）”；

圆缺一小段（传了 0 和 359 这类近似值）
圆绕好几圈甚至画成螺旋（传了 0 和 720 这类大整数）
起始点偏移（比如用了 Math.PI / 180 * 90 换算但忘了括号，导致运算顺序错）

正确写法就两个：画整圆用 0 和 2 * Math.PI；画半圆用 0 和 Math.PI 或 Math.PI 和 2 * Math.PI，取决于方向。

画出来的圆边缘发虚或像素化？

这不是 arc() 的锅，而是 canvas 像素对齐和抗锯齿机制在起作用。尤其当圆心坐标带小数（如 100.5, 100.5）时，浏览器会尝试在两个像素间插值，结果就是模糊。

解决办法很直接：

确保圆心 x、y 是整数，比如 100 而不是 100.3
设置 ctx.imageSmoothingEnabled = false（仅影响后续 drawImage，对 arc 无效）
更有效的是开启高清适配：按 window.devicePixelRatio 缩放 canvas 的 width/height 属性，并用 CSS 控制显示尺寸

例如高 DPI 下画清晰圆：

const canvas = document.getElementById('myCanvas');const ctx = canvas.getContext('2d');const dpr = window.devicePixelRatio || 1;canvas.width = 200 * dpr;canvas.height = 200 * dpr;canvas.style.width = '200px';canvas.style.height = '200px';ctx.scale(dpr, dpr);ctx.arc(100, 100, 50, 0, 2 * Math.PI); // 此时坐标仍写逻辑像素值ctx.stroke();

fill() 和 stroke() 为什么有时没反应？

arc() 只定义路径，不渲染。漏掉 stroke() 或 fill() 是新手最常卡住的地方；但还有几个隐蔽原因：

没设 ctx.strokeStyle 或 ctx.fillStyle，默认值可能是透明色（rgba(0,0,0,0)）
圆半径为 0 或负数：浏览器静默忽略，不报错也不画
圆心坐标超出 canvas 范围且半径不够大，导致整段弧不可见（比如 arc(-100, -100, 10, ...)）
调用了 fill() 但路径没闭合——arc() 本身不自动闭合，所以填充整圆没问题，但填充扇形必须手动 closePath() 或用 lineTo() 回圆心