Canvas基础教程：JS绘图入门指南

Canvas 是一个功能强大但细节繁多的 HTML 绘图接口，其核心在于正确理解“位图绘制”本质：必须通过 `getContext('2d')` 获取绘图上下文，且 HTML 的 `width`/`height` 属性直接决定绘图坐标系，仅用 CSS 调整尺寸会导致图形拉伸模糊；绘图前务必设置 `fillStyle`、`strokeStyle` 等样式状态，`arc()` 使用弧度而非角度，`drawImage()` 必须等待图片 `onload` 完成并处理跨域问题，而动画中每次重绘后都需主动调用 `clearRect()` 清屏——掌握这些关键陷阱，才能真正驾驭 Canvas 实现精准、流畅的动态绘图。

Canvas 是一个 HTML 元素，本身不绘图，只有拿到它的 getContext('2d') 才能真正开始画。

Canvas 元素必须有 width/height 属性，不能只靠 CSS 控制尺寸

很多人用 CSS 设置 canvas 宽高，结果图形被拉伸、模糊或只显示左上角一小块——这是因为 Canvas 的「绘图坐标系」由 HTML 属性 width 和 height 决定，CSS 只控制显示大小。两者不一致时，浏览器会缩放整个位图。

• 正确写法：
• 错误写法：（没设 HTML 属性）
• 若需响应式，JS 中同步修改 canvas.width 和 canvas.height，再重绘

fillRect、strokeRect、arc 这些基础绘图方法要先设置样式再调用

Canvas 没有“对象模型”，所有绘制都依赖当前上下文状态。比如没调 ctx.fillStyle 就调 fillRect()，会用默认黑色；没设 ctx.strokeStyle 和 ctx.lineWidth 就调 strokeRect()，可能看不见边框。

• ctx.fillStyle = '#f00' 影响后续所有 fill* 操作
• ctx.strokeStyle = 'rgba(0,0,0,0.7)' + ctx.lineWidth = 2 才能让 strokeRect() 显得清晰
• arc(x, y, radius, startAngle, endAngle) 的角度单位是弧度，不是度数：用 Math.PI / 180 转换，或直接写 Math.PI * 1.5

drawImage 绘制图像前，必须确保图片已加载完成

直接把 new Image() 丢给 drawImage()，大概率什么也不出现——因为图片还在网络加载中，drawImage 不会等它。

• 必须监听 img.onload 回调，在里面调用 drawImage()
• 如果图来自 URL，注意跨域问题：img.crossOrigin = 'anonymous'，否则 toDataURL() 或读取像素会报错 SecurityError
• 三种调用形式：drawImage(img, dx, dy)、drawImage(img, dx, dy, dWidth, dHeight)、drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)，最后一种可做裁剪+缩放

最常被忽略的是：Canvas 绘图后不会自动“记住”你画了什么。清屏只能靠 clearRect() 或重置 canvas 大小，动画里漏掉这步，就会残留上一帧内容。

好了，本文到此结束，带大家了解了《Canvas基础教程：JS绘图入门指南》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！