Canvas是什么？JS绘图教程详解

Canvas 是 HTML 中一个强大的绘图元素，但其使用充满细节陷阱：必须通过 HTML 的 width/height 属性而非 CSS 设置尺寸，否则图形会拉伸模糊；所有绘图操作都依赖 2D 上下文的状态（如 fillStyle、strokeStyle、lineWidth），且需严格按“设样式→调方法”顺序执行；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学习网公众号，带你了解更多关于的知识点！