Canvas和SVG

Canvas 简介

Canvas 表示画布，现实生活中的画布是用来作画的

canvas 绘制图形的基本步骤：

① 创建画布：<canvas></canvas>

② 准备画笔（获取上下文对象）：canvas.getContext('2d');

③ 开始路径规划 ：context.beginPath();

④ 移动起始点 ：context.moveTo(x, y);

⑤ 绘制线（矩形、圆形、图片...）：context.lineTo(x, y);

⑥ 闭合路径：context.closePath();

⑦ 绘制描边 ：context.stroke();

初始位置：在绘制图形时，我们首先需要确定从哪里下“笔”，这个下“笔”的位置就是初始位置。

在画布中使用 moveTo(x, y) 方法来定义初始位置，其中 x 和 y 表示水平坐标轴和垂直坐标轴的位置，中间用 , 隔开。x 和 y 的取值为数字，表示像素值（单位省略）

连线端点：在画布中使用 lineTo(x, y) 方法来定义连线端点。和初始位置类似，连线端点也需要定义 x 和 y 的坐标位置。  

描边：通过初始位置和连线端点可以绘制一条线，但这条线并不能被看到。这时我们需要为线添加描边，让线变得可见。

使用画布中的 stroke() 方法