canvas 必须显式设置 width/height 属性而非仅用 css，否则导致模糊和坐标错位；需用 javascript 获取 getcontext("2d") 绘图；内容为空需主动绘制；坐标系原点在左上角且 y 轴向下。
canvas 标签必须显式设置 width 和 height 属性
浏览器默认给 <canvas></canvas> 分配 300×150 像素的绘图表面，但这个尺寸和 CSS 设置的宽高无关——CSS 只缩放显示效果，不改变实际绘图分辨率。如果只用 CSS 控制大小（比如 style="width: 400px; height: 300px;"），会导致图形模糊、坐标偏移、鼠标事件错位。
- 正确做法：直接在标签上写
<canvas width="400" height="300"></canvas> - 动态设置时，改
canvas.width和canvas.height，不是style.width/style.height - 响应式场景下，需监听窗口变化，重新赋值
width/height并重绘
canvas 必须通过 JavaScript 获取上下文才能绘图
<canvas></canvas> 本身只是个容器，没有绘图能力。必须调用 getContext() 才能拿到绘图接口。最常用的是 "2d" 上下文，WebGL 用 "webgl"（或 "webgl2"）。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 获取失败会返回
null，常见原因：浏览器不支持、上下文类型拼错（如写成"2D"）、重复调用不同上下文类型 -
const ctx = canvas.getContext("2d");是几乎所有 2D 绘图的第一步 - 一旦获取过
"webgl"上下文，再尝试获取"2d"会失败（反之亦然）
canvas 内容不可见，需主动绘制或设置 fallback 文字
<canvas></canvas> 是空元素，内部文本（如 <canvas>您的浏览器不支持 canvas</canvas>）仅作为降级提示，不会自动渲染为图形。它只在 JS 失效、Canvas 不可用或屏幕阅读器场景下起作用。
- 不要指望写点 HTML 文字就能“显示出来”，必须用
ctx.fillRect()、ctx.fillText()等 API 绘制 - fallback 文字建议简短明确，避免冗长描述
- 无障碍支持需额外配合
aria-label或role="img"
canvas 坐标系原点在左上角，y 轴向下增长
这是和数学坐标系相反的设定，容易在画曲线、文字对齐或转换坐标时出错。所有绘图 API（如 moveTo()、arc()、fillText()）都基于此原点。
-
ctx.translate(0, canvas.height); ctx.scale(1, -1);可翻转 y 轴，但会增加复杂度，慎用 - 计算垂直居中文字时，别直接用
y = height / 2，要考虑字体基线（ctx.textBaseline = "middle"） - 鼠标事件坐标需减去 canvas 相对于视口的偏移（
getBoundingClientRect()）才能映射到绘图坐标
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
