背景

Canvas API 提供了一个通过 JavaScript 和 HTML 的元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

Canvas API 主要聚焦于 2D 图形。而同样使用元素的 WebGL API 则用于绘制硬件加速的 2D 和 3D 图形。

简单例子

<canvas id="canvas"></canvas>

Document.getElementById() 方法获取 HTML 元素的引用。接着，HTMLCanvasElement.getContext() 方法获取这个元素的 context ——图像稍后将在此被渲