canvas

canvas画布

var canvas = document.getElementById('canvas')

在当前 HTML 文档中获取 id 属性为 "canvas" 的元素对象，然后将该对象存储在一个名为 canvas 的变量中。通常情况下，这个元素应该是一个 canvas 标签，用于在网页中绘制图形。
在 JavaScript 中，document.getElementById() 是 DOM（文档对象模型） API 中的一个方法，用于从当前 HTML 文档中查找与指定 id 属性匹配的元素。如果有匹配的元素，则返回一个代表该元素的对象；如果没有匹配的元素，则返回 null。
在上述代码中，通过获取 canvas 元素对象，使得可以对该元素进行一系列的操作，例如绑定事件监听器、调用画图函数等等。

context = canvas.getContext('2d'),

这行代码是在获取 canvas 元素对象之后，使用 getContext() 方法获取该元素的绘图上下文（即 CanvasRenderingContext2D 对象）。
在 HTML 中，使用 canvas 标签可以创建一个画布元素，然后使用 JavaScript 中的 Canvas API 在该画布上进行绘制、填充等操作。而 getContext() 方法就是访问该画布对象的 CanvasRenderingContext2D 上下文对象，该对象封装了大量的绘制方法和属性，用于控制画布的显示和操作。
在这里，'2d' 参数表示获取 canvas 元素的 2D 绘图上下文，即使用二维平面坐标系进行绘制操作。通过将 canvas 元素对象和绘图上下文对象 context 关联起来，可以在 JavaScript 中对 canvas 进行各种绘图操作。