canvas 必须设置 width 和 height 属性（非 css），配唯一 id 才能用 js 获取并调用 getcontext("2d") 获取绘图上下文，否则无法绘图；高 dpi 屏幕需适配 devicepixelratio 防发虚。
直接用 <canvas></canvas> 标签就能创建画布，但不写对属性或不配 JS，它就是个看不见摸不着的透明框。
必须在 HTML 中设置 width 和 height 属性
Canvas 的尺寸必须通过标签的 width 和 height 属性定义，不能只靠 CSS。否则图形会拉伸、模糊或坐标错乱。
-
width和height单位是像素，不是 CSS 像素（比如style="width: 400px"不等于width="400"） - 不设时默认为
width="300" height="150"，但别依赖这个默认值 - 用 CSS 缩放画布（如
transform: scale(2)）会导致渲染失真，且鼠标坐标需手动换算
一定要加 id 属性才能用 JavaScript 操作
没有 id 就没法用 document.getElementById() 获取元素，后续所有绘图都无从谈起。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 推荐写法：
<canvas id="myCanvas" width="600" height="400"></canvas> - 替代方案：用
document.querySelector('canvas')，但多个<canvas></canvas>时容易误取 - 如果页面有多个画布，每个
id必须唯一，重复会导致getElementById只返回第一个
获取 2D 上下文是绘图的前提
getContext("2d") 返回的 ctx 对象才是真正的“画笔”，没它调任何绘图方法都会报错。
- 必须等 DOM 加载完成再执行，否则
document.getElementById可能返回null - 常见错误：
ctx.fillRect is not a function→ 多半是忘了调getContext("2d")或拼错了字符串（比如写成"2D"或"twod"） - 不要在
canvas元素上直接写 JS，<canvas onclick="draw()"></canvas>这类内联事件不可靠，上下文未初始化就触发会失败
最易被忽略的一点：画布内容不会自动响应窗口缩放或设备像素比变化。高 DPI 屏幕（如 MacBook Retina）下若不做 devicePixelRatio 适配，图形会发虚——这不属于基础步骤，但上线前几乎必踩。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
