canvas 标签本身不提供编辑器式交互，必须配合 javascript 使用；width 和 height 属性必须直接设置在标签上，不能仅靠 css；getcontext("2d") 返回 null 常因 dom 未加载、字符串错误或浏览器不支持；绘图不可见多因 fillstyle 未设、未清屏、坐标超界或漏调 beginpath()；高 dpi 屏幕需用 devicepixelratio 同步缩放 canvas.width/height 与 style.width/style.height。
canvas 标签本身不提供“编辑器式”交互，它是一块空白位图，必须配合 JavaScript 才能画出东西。直接在 HTML 里写 <canvas></canvas> 不会显示任何图形，更不会自动变成可拖拽、选中、撤销的绘图工具。
canvas 元素必须带 width 和 height 属性，不能只靠 CSS
这是最常被跳过的硬性前提。浏览器把 width 和 height 属性解释为「绘图缓冲区的像素数量」，不是视觉尺寸。
- 错误写法：
<canvas id="myCanvas" style="width: 400px; height: 300px"></canvas>→ 缓冲区仍是默认 300×150，图形被拉伸、鼠标坐标错位、圆变椭圆 - 正确写法：
<canvas id="myCanvas" width="400" height="300"></canvas>→ 真实可用像素就是 400×300 - 如果要响应式缩放显示（比如填满父容器），得用 JS 动态读取
canvas.clientWidth和clientHeight，再按window.devicePixelRatio设置canvas.width/canvas.height，最后用style.width/style.height控制显示大小
getContext("2d") 返回 null？先查三件事
拿到 canvas 元素后调 getContext("2d") 却返回 null，基本逃不开这三种情况：
-
document.getElementById("myCanvas")返回null：脚本执行时 DOM 还没加载完。把<script></script>放在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
