HTMLcanvas标签入门教程

HTML canvas 标签本身只是个空白的位图容器，不依赖 JavaScript 就无法绘图——它需要通过 JavaScript 获取 2D 渲染上下文（getContext("2d")）才能启动绘图能力，而初学者常踩的坑包括：用 CSS 设置宽高导致图像拉伸失真、未等待 DOM 加载就调用 getElementById、忽略坐标系与默认状态（如 fillStyle、beginPath()）、忘记手动清屏引发拖影，以及混淆 canvas 的位图本质与 DOM 的自动更新机制；掌握这些底层逻辑，才能真正驾驭 canvas 实现精准、高效、可维护的图形与动画效果。

canvas 标签本身不画任何东西，它只是个“空画布”，必须配合 JavaScript 的 getContext("2d") 才能开始绘图。直接写 页面上什么也不会出现。

怎么获取绘图上下文（getContext("2d")）

这是所有操作的前提，漏掉这步就等于没开工。

• 必须先用 document.getElementById() 拿到 canvas 元素，不能直接对 querySelector 返回的节点调用 getContext 后再赋值给变量——顺序错了会报 Cannot read property 'getContext' of null
• getContext("2d") 返回的是一个 2D 渲染上下文对象，不是 DOM 节点，后续所有绘图方法（如 fillRect、strokeText）都挂在这个对象上
• 如果页面还没加载完就执行 JS，getElementById 可能返回 null；建议把脚本放在 前，或用 DOMContentLoaded 包裹

宽高必须用 HTML 属性，别用 CSS

用 style="width: 300px; height: 150px" 看起来画布变大了，但实际绘图会严重拉伸失真——因为 CSS 只缩放显示效果，不改变底层像素网格。

• 正确写法：
• 错误写法：（即使加了 width 和 height 属性，CSS 也会覆盖渲染分辨率）
• 如果需要响应式，得用 JS 动态读取父容器尺寸，再重新设置 canvas.width 和 canvas.height，并重绘内容

为什么画布是空白的，或者只显示一半图形？

常见原因不是代码写错，而是坐标系和默认状态没理清。

• fillRect(0, 0, 100, 100) 是从左上角开始画，但如果你没设 canvas 的 width/height，它会用默认的 300×150，而你画的矩形可能超出可视区域
• fillStyle 默认是 "#000000"（黑色），如果背景也是深色，图形就“隐形”了；记得显式设置 ctx.fillStyle = "#ff0000" 或先清空背景
• 没调用 beginPath() 就连续画线，路径会累加，导致意外连接；画圆、贝塞尔曲线等路径类操作前务必加 beginPath()
• 部分浏览器（如旧版 Safari）对 canvas 的 toDataURL() 或导出有安全限制，跨域图片未设置 crossOrigin 属性时会触发 SecurityError

最易被忽略的一点：canvas 是位图，不是矢量容器。每次重绘都要手动清除旧内容（比如用 clearRect()），否则动画会拖影，交互反馈会残留——这和 DOM 更新机制完全不同，得自己管“脏区域”。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。