Canvas绘图需直接使用fillRect()、arc()和路径方法，宽高必须设在HTML属性中而非CSS，否则图形会拉伸模糊；fillRect()绘制实心矩形最快，arc()画圆需配合beginPath()和fill()，路径绘制必须显式调用beginPath()、moveTo()、lineTo()及stroke()或fill()。
直接用 fillRect()、arc() 和路径方法就能画出矩形、圆、线段等，不需要额外库或框架。
canvas 宽高必须写在 HTML 属性里，不能只靠 CSS
这是最常踩的坑：如果只用 style="width: 400px; height: 300px;" 设置尺寸，Canvas 实际绘图缓冲区还是默认的 300×150 像素，图形会被拉伸、模糊甚至错位。
- ✅ 正确写法：
- ❌ 错误写法：
（即使加了width和height属性，CSS 仍会覆盖渲染比例） - 若需响应式缩放，应监听窗口变化，手动重设
canvas.width/canvas.height并重新绘制，而不是依赖 CSS
fillRect() 是最快画实心矩形的方式
fillRect() 不走路径机制，跳过 beginPath()、fill() 等步骤，适合 UI 元素、背景块、像素级操作等高频绘制场景。
- 参数顺序固定：
fillRect(x, y, width, height)，原点(0,0)在左上角 - 颜色由
ctx.fillStyle控制，支持十六进制、rgb()、hsl()、transparent - 不自动清空之前内容——重复调用会叠加，要清屏得用
clearRect()或重绘背景 - 和
strokeRect()互不影响，可共存；但strokeRect()的线宽受ctx.lineWidth影响，fillRect()不受其控制
画圆、弧线必须用 arc() + beginPath() + fill()/stroke()
arc() 本身不绘制，只是向当前路径添加一段圆弧；漏掉 beginPath() 可能复用旧路径，漏掉 fill() 或 stroke() 就完全没显示。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 完整最小闭环：
ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fill(); - 角度单位是弧度，不是度数：90° 要写
Math.PI / 2，不是90 - 顺时针绘制（
anticlockwise = false）是默认行为，扇形起止角按此方向计算 - 想画空心圆？把
fill()换成stroke()，并提前设好ctx.strokeStyle和ctx.lineWidth
画线段或三角形必须显式管理路径
Canvas 不是“所见即所得”绘图工具，lineTo() 只是记录坐标，不自动触发渲染。很多初学者卡在“调了 lineTo() 却没线条”，本质是忘了 stroke() 或路径未开启。
- 基础线段三步不可少：
beginPath()→moveTo()→lineTo()→stroke() -
moveTo(x,y)是抬笔移动，lineTo(x,y)是落笔连线；不调moveTo()时，起点默认是上一次lineTo()或moveTo()的终点 - 闭合三角形记得
closePath()，它自动补一条线回起点，再fill()才能填满内部 - 多次绘制不同图形时，每个新图形前建议都加
beginPath()，否则旧路径可能被重复描边或填充
真正难的不是语法，而是 Canvas 没有“撤销”“选中”“图层”概念——所有图形都是像素快照，动一个就得重画一片。哪怕只是移动一个小圆，你也得先 clearRect() 掉旧位置，再 fillRect() 或 arc() 到新位置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
