为什么要使用 Canvas
可能你有同样的疑惑，那不妨先问自己一个问题：当你需要在网页上展示一些形状的时候，你会怎样做？
面对一些简单的形状（点、直线、矩形、直角三角形等）且在仅用于展示的情况下，其实用 HTML 配合 CSS 就可以完成。
对于 CSS 有一定了解的话，你会发现复杂的图形也不过是简单图形的拼接，同样可以用如上的方式来完成。
但是，一旦需要图形和图形之间产生动态联系，HTML 和 CSS 的弊端就暴露了出来：需要同时兼顾页面结构与样式，创作成本增加
举一个例子：使用 HTML 和 CSS 来展示一个角为30°的直角三角形
涉及到角度的话，很自然地可以想到 CSS 中的 transform: rotate() 属性，所以在这个例子中我选择增加一个“遮罩层”，颜色与背景保持一致。
这样一来，根据 \(90°-遮罩层旋转的角度=30°\) 就得到了遮罩层旋转的角度，就得到了图中的效果。
使用 CSS 中的 clip-path 也可以实现多边形的展示（通过设定显示的部分和隐藏的部分），但是想要再对图形进行变换，还需要引入 JavaScript 来实现动态效果，这无疑增加了工作量。
而上面这些内容就是使用 Canvas 的理由：更直接地达成目的。
同样的三角形，使用 canvas 制作还可以调整三角形的大小。在这个过程中仅使用了 HTML 和 JavaScript，而在 HTML 中不用担心页面样式，只专注于 JavaScript 的绘图即可。
Canvas 的由来
提起 Canvas 的由来，MDN 上的说法再一次让我感受到了 Apple 也就是苹果公司的牛犇之处：
为了自己的产品和品牌无尽地整活就完事了。
Canvas的使用
第一次接触 Canvas
说到 Canvas 的使用，最早接触是在大学一年级。当时有一门课叫做《网页设计与制作》，在那个里面我知道了原来 Canvas 就是一个标签 ，在页面结构里包含 不就是 Canvas 的使用了嘛。
而当时的例子也就是用 Canvas 画了一个矩形，我就觉得这跟用具有长度、宽度、背景的
展示 canvas
上面的第一次接触其实也提到了在页面中使用 Canvas 的方式，即 以标签的形式呈现在 HTML 文档中即可。
这个时候打开页面发现还是一片空白，但是在开发者模式下可以看到
可以通过 width 和 height 两个标签对 canvas 的宽度和高度进行设置，默认情况下宽度和高度如上。
...
...
改变 canvas 内容
不同于以往接触的大部分 HTML 标签，在 的开始标签和闭合标签内部写入的一切内容（包括文本和其他标签）都会被视为替代内容，即只有在当前浏览器不支持 Canvas 的情况下才会显示出来的内容（类比 中的 alt 属性应用场景）
那么如何改变 canvas 即画布上的内容就需要用到一开始提到的 JavaScript 来动态绘制内容。
作为 HTML 中的一个标签元素，我们在对 canvas 中的内容进行改变的之前，首先就要获得这个元素。
获得 canvas
let canvas = document.getElementsByTagName("canvas")[0];
获取上下文
Canvas 发展至今，除了本文主要关注的 2d 图形以外，还可以对 3d 图形进行绘制。由此，获得
let canvas = document.getElementsByTagName("canvas")[0];
let canvasContext = canvas.getContext("2d");
现在，canvasContext 就是画布的 2d 对象了，通过调用该对象的方法，就可以描绘一个图形所需要的点、线（直线、曲线）、面（多边形、圆）。
开始绘制
不同于真正地在画布上进行创作，使用 Canvas 绘制图形首先需要我们了解其绘图的原理。
此时可以回想在初中阶段学习到的平面直角坐标系，其将数与形结合起来的特质在今天也应用地相当广泛，而 Canvas 就是其中一个例子。
画布中的坐标系，以左上的画布顶点为公共点，即原点；水平向左为横轴正方向，垂直向下为纵轴正方向。区别于以往了解到的平面直角坐标系
比如 \((100, 100)\) 指的就是画布上，横向看在原点左方 100 像素；纵向看在原点下方 100 像素的点。
知道如何明确点的位置，接下就是路径，也就是一个点如何到另外一个点。
路径的设置就涉及到内置函数 lineTo 和 arcTo ，前者绘制直线，后者绘制曲线
let canvas = document.getElementsByTagName("canvas")[0];
let convasContext = canvas.getContext("2d");
// 移动到 (100, 100)
convasContext.moveTo(100, 100);
// 画直线到 (150, 150)
convasContext.lineTo(150, 150);
// 描边
convasContext.stroke();
上段代码中最后的 stroke() 决定了绘图的展示形式，即描边，除此以外还有 fill() 也就是填充。需要注意，填充需要满足绘制的形状为闭合图形。
后续
了解 Canvas 对象的具体用途后，接下来就是根据个人需求结合 Canvas 文档和丰富的第三方库开始进行自己的创作，在这个过程中提升自己的数学功底