必须先获取Canvas的2D绘图上下文，即调用getContext('2d')获得CanvasRenderingContext2D对象；需确保Canvas元素存在且非null，正确设置width/height属性而非仅靠CSS，以保证绘图清晰度。
要在HTML5中使用Canvas绘图，必须先获取其2D绘图上下文（context），这是所有绘图操作的入口。Canvas本身只是一个容器，不直接绘图，真正执行绘制的是通过getContext('2d')返回的CanvasRenderingContext2D对象。
获取Canvas元素并检查有效性
确保DOM加载完成后再操作Canvas，避免因元素未就绪导致getContext返回null：
- 使用
document.getElementById()或querySelector()获取Canvas元素 - 检查元素是否存在且
getContext('2d')返回值不为null - 若返回
null，可能是Canvas未正确声明、被CSS隐藏，或浏览器不支持2D上下文
正确调用getContext获取2D绘图环境
getContext('2d')是标准且唯一推荐的方式。注意以下细节：
- 参数区分大小写，必须是字符串
'2d'（不是'2D'或2d） - 该方法只在Canvas元素上调用，对其他元素无效
- 返回的对象包含全部绘图API：如
fillRect()、strokeText()、beginPath()等
设置Canvas实际尺寸与显示尺寸的一致性
Canvas绘图质量受width和height属性（而非CSS样式）控制：
立即学习“前端免费学习笔记（深入）”；
- 直接设置
canvas.width = 800和canvas.height = 600定义绘图缓冲区分辨率 - CSS的
width/height仅影响缩放显示，不改变像素密度 - 若仅用CSS拉伸，默认300×150的Canvas会模糊；应同步设置HTML属性或JS属性以匹配预期清晰度
常见初始化代码示例
一个健壮的初始化片段如下：
const canvas = document.getElementById('myCanvas');
if (canvas && canvas.getContext) {
const ctx = canvas.getContext('2d');
if (ctx) {
canvas.width = 800;
canvas.height = 600;
// 此时可安全调用 ctx.fillRect(0, 0, 100, 100);
}
}
