创建canvas画布并获取2d渲染上下文需两步：html中显式设置width/height像素属性，javascript中用getcontext('2d')获取上下文并校验非null。
创建 Canvas 画布并获取 2D 渲染上下文，关键就两步：在 HTML 中正确声明 <canvas></canvas> 元素并设置像素级宽高属性，再用 JavaScript 获取其 CanvasRenderingContext2D 对象。漏掉任一环节，绘图都会无声无息地失败。
HTML 中正确声明 canvas 元素
必须显式写 width 和 height 属性，单位是像素，不能只靠 CSS 控制尺寸：
- ✅ 正确：
<canvas id="myCanvas" width="600" height="400"></canvas> - ❌ 错误：
<canvas id="myCanvas" style="width:600px; height:400px"></canvas>（会导致图像拉伸、模糊、坐标偏移） - 可加
style="border:1px solid #ccc"方便看清画布边界
JavaScript 中获取 2D 上下文对象
确保 DOM 已加载完成，再执行以下操作：
- 用
document.getElementById()拿到 canvas 元素引用 - 调用该元素的
getContext('2d')方法，返回绘图上下文对象 - 建议检查返回值是否为
null，确认浏览器支持 2D 上下文
示例代码：
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
if (!ctx) {
console.error('2D context not supported');
}
常见陷阱与注意事项
- 修改
canvas.width或canvas.height属性会清空整个画布内容 - 坐标系原点在左上角，Y 轴向下增长——所有图形定位都基于此规则
- 样式设置（如
fillStyle、strokeStyle）必须放在绘图命令之前，否则无效 - 不要在未获取到
ctx的情况下调用fillRect()等方法，它们不会报错，但也不会显示任何内容
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
