Canvas需显式设置width/height属性并配JavaScript才能绘图，CSS仅拉伸致模糊；必须用getContext('2d')获取上下文对象操作，且需DOM加载后执行，否则为空白或异常。
直接在 index.html 里写 标签没用，它只是个空容器，不配 JavaScript 就画不出任何东西。
Canvas 元素必须显式设置 width/height 属性
浏览器对 的默认尺寸是 width="300" height="150"，但这个值不能靠 CSS 改——用 style="width:600px;height:300px;" 只会拉伸画面、导致图形模糊。正确做法是直接写 HTML 属性：
<canvas id="myCanvas" width="600" height="300">你的浏览器不支持 canvas</canvas>
- 所有像素级操作（比如
fillRect、getImageData）都按这个 HTML 属性值计算，不是 CSS 值 - 高 DPI 屏幕（如 Retina）下需要手动缩放 canvas 像素比，否则线条发虚
- 如果省略
width/height，JS 获取到的canvas.width和canvas.height会是 300/150，和视觉大小不一致
getContext('2d') 是绘图的唯一入口
没有 getContext('2d')， 就是一张透明 PNG。它返回的上下文对象（常叫 ctx）才是真正的“画笔”：
const canvas = document.getElementById('myCanvas');<br>const ctx = canvas.getContext('2d');<br>ctx.fillStyle = 'red';<br>ctx.fillRect(10, 10, 100, 50);
- 必须等 DOM 加载完成后再获取 canvas 元素，否则
document.getElementById返回null -
getContext('2d')在 IE9+、Firefox 1.5+、Chrome、Safari 全部支持；getContext('webgl')是另一套 API，不兼容 2D 方法 - 同一个 canvas 不能同时持有多个 2D 上下文，重复调用
getContext('2d')返回的是同一个对象
常见错误：画布显示为空白或只有一条线
多数时候不是代码错，而是漏了关键步骤：
- 忘记调用
beginPath()就直接lineTo()—— 路径状态残留，新线连到上一次终点 - 用
stroke()但没closePath()或fill()，路径存在但没描边/填充 - 坐标超出了 canvas 边界（比如
x=1000），图形被裁剪掉，看起来像没画 - canvas 元素被父容器的
overflow: hidden截断，或 CSS 设置了display: none
Canvas 不是“写完标签就自动动起来”的东西，它本质是一块内存缓冲区，每一帧都要靠 JS 显式命令去读、写、刷。最容易被忽略的，是把 canvas 当成 div 来用——它没有子元素、不响应事件（除非自己监听 canvas 元素上的鼠标事件）、也不参与文档流布局。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
