什么是canvas
canvas是 HTML5 提供的一种新标签，通常被称为画布。是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素。通过api提供了一种绘制的能力，它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。Canvas API 主要聚焦于2D图形。而同样使用Canvas元素的 WebGL API 则用于绘制硬件加速的2D和3D图形。
canvas的默认属性
canvas只有两个属性width和height。当没有设置宽度和高度的时候，canvas 会默认宽度为 300 像素和高度为 150 像素。
<canvas width="150" height="150" id="dajianshi"></canvas>
canvas的上下文
``javascript 为了展示，首先js需要找到渲染上下文，然后在它的上面绘制。<canvas> 元素有一个叫做getContext()` 的方法，这个方法是用来获得渲染上下文和它的绘画功能。getContext()接受一个参数，即上下文的类型，参考值有2d，webgl，webgl2，bitmaprenderer等。
const canvas = document.getElementById('demo');
const ctx = canvas.getContext('2d');
console.log(ctx);
代码中：ctx 就可以调用很多canvas内置的方法了，这个前奏是必须要有的。
canvas的坐标系
canvas的坐标系和我们数学中常用的直角坐标系不太一样，我们通常称为窗口坐标系，窗口坐标系统与直角坐标系统都含有x轴，y轴，两轴的交点为坐标原点（0，0），原点沿x轴向右方向为正值，不同的是原点沿y轴方向向下为正值。在canvas的2D绘图环境中的坐标系统，默认情况下以canvas的左上角为坐标原点，沿x轴向右为正值，沿y轴向下为正值。其中canvas坐标的单位都是 "px"。然而Canvas的坐标系并不是固定的，我们可以对坐标系统进行评议放缩及旋转，我们称为坐标变换——平移、缩放、旋转
