1 Canvas 简介
Canvas 表示画布，现实生活中的画布是用来作画的。
HTML5 中的 Canvas ：我们可以称它为“网页中的画布”。默认情况下，Canvas 是一块 300px*150px 的矩形画布，用户可以自定义画布的大小或为画布添加其他属性。
利用 Canvas 实现绘画：Canvas 并不是通过鼠标绘画的，而是用户需要通过 JavaScript 来控制画布中的内容，例如添加图片、线条、文字等。
2 使用 Canvas 绘制图形
2.1 <canvas> 标签
使用 HTML5 中的<canvas>标签在网页中创建一个画布，语法格式如下：
<canvas id="canvas" width="400" height="300">
您的浏览器不支持canvas标签，请更新浏览器
</canvas>
上述代码定义了一个 id 为 canvas 的画布，并设置了画布的宽度为 400px，高度为 300px。
通过 JavaScript 的 getElementById() 方法获取到网页中的画布对象，代码如下所示：
var canvas = document.getElementById("canvas");
上述代码获取了 id 为 canvas 的画布，同时将获取的画布对象保存在变量 canvas 中。
context对象：是画布的上下文，也叫做绘制环境，是所有的绘制操作 API 的入口。 context 对象可以使用 getContext() 方法获得，代码如下所示：
var context = canvas.getContext('2d');
上述代码中的参数2d代表画笔的种类，表示二维绘图的画笔。如果想要绘制三维图，可以把参数替换为webgl。
2d：代表一个平面，绘制图形时需要在平面上确定起始点，也就是“从哪里开始画”，这个点需要通过坐标来控制。
Canvas 的坐标系：从最左上角0,0开始。x 轴向右逐渐增加，y 轴向下逐渐增加。
2.2 绘制线条
线的定义：线是所有复杂图形的组成基础，想要绘制复杂的图形，首先要从绘制线开始。
线的组成：在绘制线之前首先要了解线的组成。一条最简单的线由三部分组成，分别为初始位置、连线端点以及描边。
初始位置：在绘制图形时，我们首先需要确定从哪里下“笔”，这个下“笔”的位置就是初始位置。
在画布中使用moveTo(x, y)方法来定义初始位置，其中 x 和 y 表示水平坐标轴和垂直坐标轴的位置，中间用,隔开。x 和 y 的取值为数字，表示像素值（单位省略）。
设置初始位置的示例代码如下所示：
context.moveTo(x, y);
连线端点：在画布中使用lineTo(x, y)方法来定义连线端点。和初始位置类似，连线端点也需要定义 x 和 y 的坐标位置。
定义连线端点的代码如下所示：
context.lineTo(x, y);
描边：通过初始位置和连线端点可以绘制一条线，但这条线并不能被看到。这时我们需要为线添加描边，让线变得可见。
使用画布中的stroke()方法，可以实现线的可视效果。
设置描边的代码如下所示：
context.stroke();
2.3 设置线条的样式
context.lineWidth=5;//设置线的宽度
context.strokeStyle="red";//设置线的颜色
context.lineCap="round";//设置圆形端点
context.fillStyle="pink";//设置背景颜色
除了执行 stroke() 方法根据路径进行描边，还可以使用fill()方法进行图形的填充，示例代码如下： context.fill();
2.4设置线条的路径
路径的定义：路径是所有图形绘制的基础，通过初始位置和连线端点即可创建一条路径。
路径需要通过路径状态进行重置或闭合，来产生不同的路径样式。
路径的状态：
重置路径
闭合路径
重置路径的概念：
在同一画布中，即使我们添加再多的连线端点也只能有一条路径，如果想要开始新的路径就需要使用beginPath()方法，当出现beginPath()时即表示路径重新开始。
步骤二：重置路径
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.moveTo(10,10); // 定义初始位置
context.lineTo(300,10); // 定义链接端点
context.lineWidth=5; // 设置线的宽度
context.strokeStyle='red'; // 设置线的颜色
context.stroke(); // 描边
context.beginPath(); // 重置路径
context.moveTo(10,60); // 定义初始位置
context.lineTo(300,60); // 定义链接端点
context.lineWidth=10; // 设置线的宽度
context.strokeStyle='green'; // 设置线的颜色
context.stroke(); // 描边
</script>
闭合路径的概念：
闭合路径就是将我们绘制的开放路径进行封闭处理，多点的路径闭合后会形成特定的形状。在画布中使用closePath()方法闭合路径。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="400" height="300">
您的浏览器不支持canvas标签，请更新浏览器
</canvas>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.moveTo(10,10);
context.lineTo(10,100);
context.lineTo(100,100);
context.closePath(); // 闭合路径
context.stroke();
</script>
</body>
</html>
3 Canvas 常用方法
3.1 canvas 绘制矩形
绘制一个红色的矩形
设置 fillStyle 属性可以是 CSS 颜色、渐变或图案。fillStyle 默认设置是#000000（黑色）。
fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。
3.2 canvas 绘制圆形
在canvas中绘制圆形，我们将使用以下方法:
arc(x, y, r, start, stop)
参数分别是：（圆心x坐标, 圆心y坐标, 半径r, 开始弧度, 结束弧度）。
结束弧度的计算公式：
角度 * Math.PI / 180。
context.arc(100, 100, 50, 0, 360 * Math.PI / 180); // 绘制圆形
context.stroke(); // 描边
3.3 canvas 绘制椭圆
在 canvas 中绘制椭圆, 我们将使用以下方法:
ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)
参数分别是：（椭圆圆心x坐标, 椭圆圆心y坐标, 半径x, 半径y, 旋转的角度, 起始角, 结束角, 顺时针/逆时针）
绘制一个椭圆
context.ellipse(120, 100, 100, 50, 0, 0, 360 * Math.PI / 180); // 绘制椭圆
context.stroke(); // 描边
3.4 canvas 绘制文本
使用 canvas 绘制文本，重要的属性和方法如下：
font - 定义字体
fillText(text,x,y) - 在 canvas 上绘制实心的文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本
使用“Arial”字体在画布上绘制一个高 30px 的实心文字：
context.font = '30px Arial'; // 设置文本样式
context.fillText('Hello World', 10, 50); // 绘制实心文字
3.5 canvas 渐变
渐变可以填充到矩形、圆形、线条、文本等，各种形状可以自定义不同的颜色。
有两种方式来设置 Canvas 渐变：
createLinearGradient(x, y, x1, y1)：创建线条渐变；
createRadialGradient(x, y, r, x1, y1, r1)：创建一个径向/圆渐变。
使用 createLinearGradient()，创建一个线性渐变。
当我们使用渐变对象，必须使用两种或两种以上的停止颜色。addColorStop() 方法指定停止颜色，位置可以是 0 至 1。
使用渐变，设置 fillStyle 或 strokeStyle 的值为渐变，然后绘制形状，如矩形、文本或一条线.
gradient.addColorStop(0, 'red'); // 设置渐变颜色（开始）
gradient.addColorStop(1, 'green'); // 设置渐变颜色（结束）
context.fillStyle = gradient; // 设置渐变填充样式
context.fillRect(10, 10, 200, 80); // 绘制矩形
4 SVG 简介
SVG 英文全称为 Scalable Vector Graphics，意思为可缩放的矢量图。
HTML5 支持内联 SVG。
HTML<svg>元素是 SVG 图形的容器。
SVG 有多种绘制路径、框、圆、文本和图形图像的方法。
4.1 什么是SVG ?
SVG 指可伸缩矢量图形（Scalable Vector Graphics）；
SVG 用于定义用于网络的基于矢量的图形；
SVG 使用 XML 格式定义图形；
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失；
SVG 是万维网联盟的标准。
4.2 SVG优势
与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：
SVG 图像可通过文本编辑器来创建和修改；
SVG 图像可被搜索、索引、脚本化或压缩；
SVG 是可伸缩的；
SVG 图像可在任何的分辨率下被高质量地打印；
SVG 可在图像质量不下降的情况下被放大。
4.3SVG 与 Canvas 两者间的区别
SVG 是一种使用 XML 描述 2D 图形的语言。
Canvas 通过 JavaScript 来绘制 2D 图形。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas 是逐像素进行渲染的。在 Canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
5 使用 SVG 绘制基本图形
5.1 绘制矩形
使用 rect 标签，主要属性：
x/y：绘图位置，
width/height：矩形长宽，
fill：填充颜色，默认黑色，
stroke：描边的颜色。
stroke-width：描边的宽度。
rx/ry：描边的圆角。
5.2 绘制圆和椭圆
5.2.1 绘制圆
方法一：使用矩形绘制。
示例代码：
<svg width="500" height="500"><rect x="100" y="10" width="100" height="100" rx="50"></rect></svg>
方法二：
使用专门的标签绘制，主要属性：
cx/cy：圆绘制的位置，圆心位置。
r：圆的半径。
5.2.2 绘制椭圆
5.3 绘制直线、折线、多边形
5.3.1 绘制直线
5.3.2 绘制折线
5.3.3 绘制多边形
