HTML中的canvas标签怎样用？

canvas 标签本身不绘图，必须通过 JavaScript 调用 getContext("2d") 获取 2D 渲染上下文才能绘图；需先用 document.getElementById() 获取 canvas 元素，且宽高须用 HTML 属性而非 CSS 设置，否则导致失真；绘图前须注意坐标系、fillStyle、beginPath() 及手动清屏等默认状态问题。

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

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

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

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

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

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

• 正确写法：<canvas id="myCanvas" width="300" height="150"></canvas>
• 错误写法：<canvas id="myCanvas" style="width:300px;height:150px"></canvas>（即使加了 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 更新机制完全不同，得自己管“脏区域”。