Canvas 必须显式设置 width 和 height 属性（纯数字），CSS 仅控制显示尺寸；否则绘图失真、导出错乱；需用 getContext("2d") 获取上下文才能绘制，且应提供内部降级提示文本。
canvas 标签必须显式设置 width 和 height 属性
Canvas 的绘图区域尺寸由 width 和 height HTML 属性决定，不是 CSS 的 style="width: ...; height: ...;"。如果只用 CSS 控制大小，画布会拉伸失真——比如文字模糊、线条锯齿、导出 PNG 尺寸错乱。
常见错误现象：矩形看起来“胖了”或“瘦了”，ctx.fillText() 文字边缘发虚，右键另存为图片时尺寸和预期不符。
-
width和height值应为纯数字（如800），不带单位；写成"800px"会导致解析失败，回退到默认 300×150 - 若需响应式显示，保留属性值为逻辑分辨率（如
width="800" height="600"），再用 CSS 缩放容器（如max-width: 100%; height: auto;）并配合transform: scale()或媒体查询调整 - 修改
canvas.width或canvas.height的 JavaScript 属性会清空整个画布内容（重置位图），慎用于运行中调整
必须通过 getContext("2d") 获取绘图上下文才能绘制
没有上下文，<canvas> 只是一块透明的空白 DOM 元素，调用任何绘图方法都会静默失败（不会报错，但也不出图）。
使用场景：页面加载后立即初始化，或在模块化代码中封装为可复用的初始化函数。
立即学习“前端免费学习笔记（深入）”；
- 必须传字符串
"2d"（区分大小写），写成"2D"或"2d "会返回null - 检查返回值是否为
null是调试第一步：if (!ctx) console.error("2D context not supported") - 一个
<canvas>元素只能获取一次有效上下文；重复调用getContext("2d")没问题，但切换成"webgl"后再切回"2d"可能触发浏览器兼容性问题（尤其旧版 Safari）
canvas 内容为空时需提供降级提示文本
不是所有环境都支持 Canvas（如某些企业内网 IE 模式、屏幕阅读器默认行为），把提示文字直接写在 <canvas> 标签内部，是唯一被广泛识别的降级方式。
容易踩的坑：把提示塞进 title、aria-label 或外层 <div>，这些对不支持 Canvas 的浏览器无效。
- 文字内容要简洁明确，例如：
Your browser does not support <canvas>. - 避免纯图标或空
<canvas>标签，否则无障碍工具无法传达缺失信息 - 现代项目中虽可忽略 IE，但部分政企系统仍依赖 Trident 内核，保留提示成本极低，收益明确
边框 style 属性只是调试辅助，不是必需项
style="border: 1px solid #000;" 唯一作用是让你看清画布实际占据的布局区域，对绘图逻辑、导出、事件坐标无任何影响。
性能与兼容性影响几乎为零，但过度依赖它可能掩盖真实问题：比如画布被父容器 overflow: hidden 截断，或因 margin/padding 错位导致鼠标事件坐标偏移。
- 上线前建议移除或改为
outline（避免影响盒模型计算） - 调试时可用
getBoundingClientRect()配合console.log()精确验证画布位置，比肉眼观察边框更可靠 - 若用 CSS 框架（如 Tailwind），注意其重置样式可能清除了 border，需显式加回或改用
ring类调试
width/height 属性）和视觉尺寸（CSS）分离这件事，不是“设了就行”，而是在缩放、高清屏、导出、事件映射等每个环节都持续产生连锁影响。没理清这点，后面所有绘图、交互、适配问题都会反复出现。 
