HTML5canvas画布怎么画简单图形_矩形圆形绘制方法【操作】_技术教程

fillRect 和 strokeRect 是唯二无需 beginPath 的矩形绘制方法，但会保留全局样式状态；画圆必须用 arc 且角度单位为弧度，需注意坐标系、像素尺寸与 CSS 缩放区别。

用 `fillRect` 和 `strokeRect` 画矩形，别漏掉 `beginPath`

Canvas 绘图必须先获取上下文，再调用绘图方法。画实心矩形直接用 fillRect(x, y, width, height)，描边矩形用 strokeRect(x, y, width, height)。这两个是唯一不需要路径操作的绘图方法，但正因为“省事”，容易误以为其他图形也能这么干——其实不能。

常见错误：在调用 fillRect 后立刻画圆，发现圆被意外填充或颜色错乱。这是因为 fillStyle 和 strokeStyle 是全局状态，且 fillRect 不触发路径重置。虽然它自己不依赖路径，但会干扰后续需要 beginPath() 的操作。

fillRect 和 strokeRect 是独立命令，不参与路径系统，也不受 closePath() 影响
如果之后要画圆、线段等，务必在调用前加 ctx.beginPath()，否则可能复用上一次路径导致渲染异常
坐标 (x, y) 指的是矩形左上角，不是中心点——这点和 arc 的圆心坐标逻辑不同，容易画偏

画圆形必须用 `arc`，`startAngle` 和 `endAngle` 单位是弧度

Canvas 没有 drawCircle 这样的快捷方法，所有圆/圆弧都靠 arc(x, y, radius, startAngle, endAngle, anticlockwise)。最常踩的坑是角度单位：它不用度数，而用弧度。写 90 不代表 90°，而是 90 弧度（≈5156°），结果啥也画不出来。

正确做法是把角度转成弧度：乘以 Math.PI / 180。画整圆就是从 0 到 2 * Math.PI。

const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(100, 100, 40, 0, 2 * Math.PI); // 圆心(100,100)，半径40，完整一圈
ctx.fillStyle = '#ff6b6b';
ctx.fill();

漏掉 beginPath() 会导致新圆叠加在旧路径上，fill() 可能填充出奇怪形状
第三个参数是半径，不是直径；第四个参数是起始弧度，第五个是结束弧度，第六个是顺时针（false）还是逆时针（true）
如果只要圆边框，用 stroke() 替代 fill()，别忘了设 strokeStyle

想画正圆却变成椭圆？检查 canvas 元素的 CSS 宽高设置

Canvas 渲染分辨率由 HTML 属性 width 和 height 决定，不是 CSS 的 style.width 或 style.height。如果只用 CSS 缩放 canvas（比如设 style="width:100%; height:200px"），画布像素没变，只是被拉伸了，圆必然变椭圆。

正确做法是：要么让 CSS 尺寸和 HTML 属性一致；要么动态同步——比如监听窗口 resize，用 canvas.width = canvas.clientWidth 重设像素宽高，再重绘。