canvas 标签本身不画任何东西，它只是提供一块空白的位图画布——所有绘制必须通过 javascript 调用 getcontext('2d') 或 getcontext('webgl') 获取绘图上下文后才能进行。
canvas 标签本身不画任何东西，它只是提供一块空白的位图画布——所有绘制必须通过 JavaScript 调用 getContext('2d') 或 getContext('webgl') 获取绘图上下文后才能进行。
为什么直接写 <canvas></canvas> 页面上什么也不显示？
因为 canvas 是一个“无内容”的替换元素，默认宽 300px、高 150px，但内部像素全为透明黑（RGBA(0,0,0,0)），且没有自动渲染逻辑。你得手动获取上下文、设置样式、调用绘图函数。
- 漏掉
getContext('2d')就等于没打开画笔，后续所有fillRect、strokeText都静默失败 - 如果 canvas 没设
width和height属性（注意：不是 CSS 的style.width），会使用默认尺寸，但缩放后图像模糊——这是最常被忽略的清晰度陷阱 -
getContext()返回null通常是因为传了错误参数，比如'2D'（大小写错）或'webgl2'（浏览器不支持）
getContext('2d') 绘制矩形和文字的基本流程
2D 上下文是最常用入口，适合图表、UI 元素、简单动画。关键点在于「状态管理」：颜色、线宽、字体等都属于上下文状态，会持续生效直到被覆盖。
- 先调用
ctx.fillStyle = '#ff6b6b'再调ctx.fillRect(10, 10, 80, 40)才能填出红色矩形 - 文字默认不可见：必须设
ctx.font = '16px sans-serif'且用ctx.fillText()（不是innerHTML） -
ctx.beginPath()不是必需的，但画路径（如圆、多边形）前建议调用，避免意外连接上一条路径的终点 - 清空画布用
ctx.clearRect(0, 0, canvas.width, canvas.height)，别用canvas.width = canvas.width（会重置所有上下文状态）
Canvas 清晰度差、线条发虚？检查这三处
设备像素比（window.devicePixelRatio）是核心原因。CSS 设置的宽高和 canvas 内部位图尺寸不一致时，浏览器会插值缩放，导致模糊。
- 正确做法：用 JS 同步设置
canvas.width/canvas.height为cssWidth * dpr，再用 CSS 把 canvas 缩放到目标尺寸 - 例如：想让 canvas 在页面上显示为 400×300px，dpr=2，则设
canvas.width = 800、canvas.height = 600，再加canvas.style.width = '400px'; canvas.style.height = '300px'; - 抗锯齿开关：
ctx.imageSmoothingEnabled = false对drawImage()有效；但lineWidth小于 1 或非整数坐标仍可能模糊——尽量用整数坐标 +ctx.translate(0.5, 0.5)对齐像素网格
什么时候不该用 canvas？
Canvas 是位图，不保留图形对象模型。这意味着：
- 无法直接监听某个圆形的 click 事件——你得自己做坐标计算和命中测试
- 无障碍支持弱：屏幕阅读器看不到 canvas 内容，需额外用
aria-label或同步维护一份 DOM 备份 - 大量静态图标/按钮/文本排版，用 SVG 或普通 HTML+CSS 更轻量、可缩放、易维护
- 需要频繁重绘复杂图层（如地图缩放）时，WebGL（
getContext('webgl')）比 2D 上下文性能高一个数量级
实际项目里，canvas 的边界往往不在“能不能画”，而在“要不要承担状态管理、清晰度适配、交互还原这些隐性成本”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
