必须先调用getContext('2d')获取2D上下文才能画圆，因canvas自身无绘图能力；漏此步则arc()等方法静默失效；还需配合beginPath()、fillStyle、fill()三步缺一不可，且角度须用弧度（如2*Math.PI）。
canvas画圆前必须先获取2D绘图上下文
直接写 <canvas> 标签不会自动绘图，必须用 JavaScript 获取其 getContext('2d') 才能操作。没这步，所有绘图方法（包括画圆）都无效。
常见错误是只写了 HTML 但忘了 JS 初始化，页面一片空白还查不出原因。
- 确保
<canvas>有明确的width和height属性（不是 CSS 宽高），否则默认尺寸为 300×150，可能被裁剪或缩放 - JS 必须在 DOM 加载完成后执行，推荐放在
</body>前，或用DOMContentLoaded事件 - 检查浏览器控制台是否报错
TypeError: canvas.getContext is not a function—— 多半是获取到的canvas元素为null（ID 写错或节点未挂载）
用arc()画圆：参数顺序和起始/结束角度别填反
arc() 是画圆弧（也包括整圆）的核心方法，画实心红圆需配合 fillStyle 和 fill()。最容易出错的是角度单位——它用的是弧度，不是度数。
例如想画一个圆心在 (100, 100)、半径 50 的红圆：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2); // 起始角 0，结束角 2π → 整圆
ctx.fill();-
arc(x, y, radius, startAngle, endAngle, anticlockwise?)：前五个参数必填，第六个可选（默认顺时针） -
0到Math.PI * 2表示完整一圈；填0到Math.PI只画半圆 - 漏掉
beginPath()可能导致上一次路径残留，影响填充范围 - 如果圆显示不全，先确认 canvas 的 width/height 是否足够容纳圆心 ± 半径
红色怎么设：用颜色关键字、十六进制还是 rgba？
fillStyle 支持所有 CSS 颜色值，但要注意透明度设置方式不同。
- 纯红：直接写
'red'、'#f00'、'#ff0000'或'rgb(255, 0, 0)'都可以 - 带透明度的红：
'rgba(255, 0, 0, 0.5)'（注意是rgba，不是rgb） - 避免用
'hsl(0, 100%, 50%)'等复杂格式——没必要，且旧版 Safari 对 HSL 支持不稳定 - 如果颜色没生效，检查是否在
fill()之前设置了fillStyle，顺序不能颠倒
为什么圆看起来模糊或偏移？像素对齐问题要手动修正
Canvas 坐标系原点在左上角，但绘制时若圆心坐标是小数（比如 100.5），浏览器会做抗锯齿插值，导致边缘发虚；更隐蔽的问题是：当 canvas 缩放（如 CSS 设置了 width/height）时，实际渲染分辨率与显示尺寸不一致，圆会变糊。
- 解决模糊：把圆心坐标取整，或用
Math.round(x)，尤其在动画中频繁重绘时 - 解决缩放失真：不要仅靠 CSS 拉伸 canvas，应同步设置 canvas 元素的
width和height属性匹配显示尺寸（例如 CSS 宽高为 400×300，就设<canvas width="400" height="300">） - 如果用了
devicePixelRatio高清适配，记得按比例放大 canvas 内部尺寸并缩放 ctx，否则在 Retina 屏上圆仍会模糊
圆本身很简单，但 canvas 的坐标精度、设备像素比、上下文状态管理这些细节，才是真正决定它画得“对不对”的地方。
