HTML5 <canvas> 标签用于绘制图像（通过脚本，通常是 JavaScript）。

不过，<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。

getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

ctx 是画布的 2D 渲染上下文对象（CanvasRenderingContext2D）。

canvas ctx ctx.canvas 三者关系

const canvas = document.getElementById('myCanvas');  // ① 画布元素对象
const ctx = canvas.getContext('2d');                 // ② 渲染上下文对象

// ctx 可以通过 .canvas 属性访问到它所属的画布元素
console.log(ctx.canvas === canvas);  // true
对象 类型 作用
canvas HTMLCanvasElement DOM元素本身，负责管理尺寸、样式等
ctx CanvasRenderingContext2D 绘图工具对象，提供所有绘图方法（fillRect、drawImage等）

为什么用 ctx.canvas.width 而不是直接用 canvas.width？

两种写法效果完全一样：

// 写法一：通过 ctx 间接访问
ctx.canvas.width
ctx.canvas.height

// 写法二：直接访问 canvas 元素
canvas.width
canvas.height

通常使用 ctx.canvas.width 的场景：

  • 在函数中只有 ctx 参数传入，没有保存 canvas 变量时
  • 需要确保绘图操作与画布尺寸保持一致时

总结

  • canvas = 画板本身（有宽高属性）
  • ctx = 画笔工具（有各种绘图方法）
  • ctx.canvas = 通过画笔工具找到它正在工作的那块画板