用标签创建绘图区域需设置width/height属性（非css），再用javascript调用getcontext('2d')获取上下文；常见问题包括尺寸为0×0、getcontext返回null、绘制模糊，根源在于混淆css尺寸、属性尺寸与设备像素比。
怎么用 <canvas></canvas> 标签创建绘图区域
直接写 <canvas></canvas> 标签就行，但光有标签没用——它默认是空白、透明、不渲染任何内容的“空画布”。必须配合 JavaScript 的 getContext() 才能真正开始绘图。
常见错误现象：页面上啥也没显示，检查 DOM 确实有 <canvas></canvas>，但尺寸为 0×0 或背景全白（其实是透明）。
-
<canvas></canvas>默认宽高是 300×150 像素，不是“自适应父容器”，别指望它自动撑满 - 用 CSS 设置
width/height会拉伸画布内容（模糊失真），正确做法是直接设width和height属性（非 CSS） - 必须先获取上下文，例如
const ctx = canvas.getContext('2d')；传错字符串（如'2D'或'webgl2'拼错）会返回null
示例：
<canvas id="myCanvas" width="600" height="400"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d'); // 注意是小写 '2d'
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 100);
</script>为什么 getContext('2d') 返回 null
多数情况是 canvas 元素还没加载完成，或被重复调用导致上下文失效。更隐蔽的是：某些浏览器（尤其旧版 Safari）在 canvas 被隐藏（display: none）后调用 getContext，可能返回 null。
立即学习“前端免费学习笔记（深入）”；
- 确保脚本在 DOM 加载完成后执行，比如放在
