1. 什么是Canvas
我们常说的Canvas，即为HTML5 <canvas> 标签，它主要其被用于绘制图像。
Canvas是通过JavaScript进行2D图形的绘制，而 <canvas> 标签本身是没有任何绘制能力的，它仅仅是一个容器。在绘制时，canvas是逐像素的进行渲染的，一旦图形绘制完成，该元素就不再被浏览器所关注（脚本执行结束，绘制的图形也不属于DOM）。
canvas目前几乎被所有的浏览器支持，但是IE 9.0 之前的版本不支持 canvas元素 |
2. Canvas的缺点
Canvas本质上是一个与 分辨率相关 的 位图画布，也就注定了在不同分辨率下，canvas绘制的内容显示的时候会有所不同。此外，canvas绘制的内容 不属于任何DOM元素 ，在浏览器的元素查看器中也找不到，那自然无法检测鼠标点击了canvas中的哪个内容。
举个例子：
果使用CSS设置canvas元素的尺寸，那可能会导致绘制出来的图形变得扭曲，如长方形变正方形，圆形变椭圆等，这是因为画布尺寸和元素尺寸是不一样的，画布会自动适应元素的尺寸，如果二者是成比例的，那么画布就会等比例缩放，不会出现扭曲。
3. Canvas的基本使用
<canvas id="canvas" width="600" height="300">
当前浏览器不支持canvas
</canvas>在第一行HTML代码中可以看到两个属性：width 和 height ，它指明了画布的宽高，在上文中提到过，不要使用CSS规定尺寸，因为当CSS规定的尺寸和画布尺寸比例不一致时，无法成比例缩放，导致绘制出来的图形变得扭曲。在没有设置画布大小时，canvas默认会初始化成300px * 150px的画布。
canvas元素本身没有绘制能力，只是作为一个容器，所以需要通过JavaScript这类脚本进行绘制：
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');上面的HTML+JS代码是使用canvas所必须的，无论要绘制什么内容，这几行代码不可缺少。getContext() 是canvas元素提供的方法，用于获取绘制上下文。
参考文档：