1. Canvas概述
1.1 Canvas是什么
Canvas又称为“画布”，是HTML5的核心技术之一，通常说的Canvas技术，指的就是使用Canvas元素结合JavaScript来绘制各种图形的技术。
1.2 Canvas的用途
1）绘制图形；
2）绘制图表；
3）动画效果；
4）游戏开发。
1.3 Canvas和SVG的区别
1）Canvas是使用JavaScript动态生成的，SVG是使用XML静态描述的；
2）使用Canvas绘制出来的是一个“位图”，而使用SVG绘制出来的是一个“矢量图”；
3）每次发生修改，Canvas需要重绘，而SVG不需要重绘；
4）Canvas与SVG的关系，就像“美术与几何”的关系。
2. Canvas元素知识
2.1 使用Canvas元素来绘制图形，需要三步：
1）获取canvas对象：
代码语言：javascript复制let cnv = document.getElementById('canvas');2）获取上下文环境对象context：
代码语言：javascript复制let cxt = cnv.getContext('2d');3）绘制图形：
代码语言：javascript复制cxt.moveTo(50, 100);
cxt.lineTo(150, 50);
cxt.stroke();
...2.2 Canvas元素
Canvas是一个行内快元素，一般需要指定其三个属性：id、width和height，默认情况下，Canvas的宽度为300px，高度为150px。
对于Canvas的宽度和高度应该在HTML属性中定义，如果在CSS样式中定义，那么使用canvas对象获取的宽度和高度是默认值，而不是实际的宽度和高度。
2.3 Canvas对象
2.3.1 canvas对象属性
1）width：Canvas的宽度；
2）height：Canvas的高度。
2.3.2 canvas对象方法
1）getContext('2d')：获取Canvas 2D上下文环境对象；
2）toDataURL()：获取canvas对象产生的位图的字符串。
HTML5 Canvas暂时只提供2D绘图API，3D绘图可以使用HTML5中的WebGL进行开发。
3. 直线图形
3.1 直线
3.1.1 Canvas坐标系
Canvas使用的坐标系是W3C坐标系。
数学坐标系：y轴正方向向上；W3C坐标系：y轴正方向向下。
3.1.2 一条直线
代码语言：javascript复制cxt.moveTo(x1, y1);//起点坐标
cxt.lineTo(x2, y2);//终点坐标
cxt.stroke();//画线3.1.3 多条直线
代码语言：javascript复制cxt.moveTo(x1, y1);//起点坐标
cxt.lineTo(x2, y2);//终点坐标
cxt.lineTo(x3, y3);//终点坐标
...
cxt.stroke();//画线第二次使用lineTo()后，Canvas会以“上一个终点坐标”作为第二次调用的起点坐标，然后再开始画直线，以此类推。
在实际开发中，对于三角形和多边形，我们都是用moveTo()和lineTo()来实现。
3.2 矩形
在Canvas中，矩形分为两种，“描边”矩形和“填充”矩形。
3.2.1 “描边”矩形
代码语言：javascript复制cxt.strokeStyle = 属性值;//取值有三种，颜色值、渐变色和图案
cxt.strokeRect(x, y, width, height);//x和y为矩形最左上角的坐标3.2.2 “填充”矩形
代码语言：javascript复制cxt.fillStyle = 属性值;//取值有三种，颜色值、渐变色和图案
cxt.fillRect(x, y, width, height);//x和y为矩形最左上角的坐标3.2.3 rect()方法
代码语言：javascript复制cxt.rect(x, y, width, height);只有在使用rect()方法之后再调用stroke()或者fill()方法，才会把矩形绘制出来。
3.2.4 清空矩形
代码语言：javascript复制cxt.clearRect(x, y, width, height);//清空指定区域的矩形
cxt.clearRect(0, 0, cnv.width, cnv.height);//清空整个Canvas4. 曲线图形
4.1 圆形
代码语言：javascript复制cxt.beginPath();//开始一个新路径
//x和y表示圆心坐标，开始角度和结束角度都是以“弧度”为单位
//anticlockwise为true时，表示逆时针方向绘制；为false时，表示顺时针方向绘制
cxt.arc(x, y, 半径, 开始角度, 结束角度, anticlockwise);
cxt.closePath();//关闭当前路径对于开始角度和结束角度，推荐写法：度数*Math.PI/180，例如：
代码语言：javascript复制120*Math.PI/180 //120°
150*Math.PI/180 //150°4.2 “描边”圆
代码语言：javascript复制//状态描述
cxt.beginPath();
cxt.arc(x, y, 半径, 开始角度, 结束角度, anticlockwise);
cxt.closePath();
//描边
cxt.strokeStyle = '颜色值';
cxt.sroke();4.3 “填充”圆
代码语言：javascript复制//状态描述
cxt.beginPath();
cxt.arc(x, y, 半径, 开始角度, 结束角度, anticlockwise);
cxt.closePath();
//填充
cxt.fillStyle = '颜色值';
cxt.fill();4.4 arc()画弧线
代码语言：javascript复制//状态描述
cxt.beginPath();
cxt.arc(x, y, 半径, 开始角度, 结束角度, anticlockwise);
//描边
cxt.strokeStyle = '颜色值';
cxt.sroke();arc()画弧线不使用closePath()来关闭路径，closePath()方法的作用在于关闭路径、连接起点和终点。
4.5 arcTo()画弧线
代码语言：javascript复制//(cx, cy)表示控制点的坐标
//(x2, y2)表示结束点的坐标
//radius表示圆弧的半径
cxt.artTo(cx, cy, x2, y2, radius);画一条弧线需要提供三个点的坐标，开始点、控制点和结束点，一般由moveTo()和lineTo()提供开始点，arcTo()提供控制点和结束点。
arcTo()方法就是利用开始点、控制点和结束点这三个点所形成的夹角，然后绘制一段与夹角的两边相切并且半径为radius的圆弧。
arcTo()方法绘制的弧线是两个切点之间长度最短的那个圆弧。
4.6 二次贝塞尔曲线
代码语言：javascript复制//(cx, cy)表示控制点的坐标
//(x2, y2)表示结束点的坐标
cxt.quadraticCurveTo(cx, cy, x2, y2);绘制一条二次贝塞尔曲线也需要提供三个点的坐标，开始点、控制点和结束点，一般由moveTo()和lineTo()提供开始点，quadraticCurveTo()提供控制点和结束点。
4.7 三次贝塞尔曲线
代码语言：javascript复制//(cx1, cy1)表示控制点1的坐标
//(cx2, cy2)表示控制点2的坐标
//(x2, y2)表示结束点的坐标
cxt.bezierCurveTo(cx1, cy1, cx2, cy2, x, y)绘制一条三次贝塞尔曲线需要提供四个点的坐标，开始点、控制点1、控制点2和结束点，一般由moveTo()和lineTo()提供开始点，由bezierCurveTo()提供控制点1、控制点2和结束点。
三次贝塞尔曲线有两个控制点，而二次贝塞尔曲线只有一个控制点。
5. 线条操作
5.1 线条操作属性
5.1.1 lineWidth（定义线条宽度）
代码语言：javascript复制//默认值为1，默认单位为px
cxt.lineWidth = 整数;5.1.2 lineCap（定义线帽样式）
代码语言：javascript复制//属性值
//Butt：默认值，无线帽，每条线的头端和尾端都是长方形，即不做任何处理
//Round：圆形线帽，每条线的头和尾都增加一个半圆，半圆的直径为线宽长度
//Square：正方形线帽，每条线的头和尾都增加一个长方形，长方形的长度为线宽的一半，高度保持为线宽高度
cxt.lineCap = '属性值';5.1.3 lineJoin（定义两个线条交接处样式）
代码语言：javascript复制//属性值
//miter：默认值，尖角，线段在交接处延伸直至交于一点
//round：圆角，连接处是一个圆角，圆角所在圆的直径等于线宽长度
//bevel：斜角，连接处是一个斜角，斜角所在正方形的对角线长等于线宽长度
cxt.lineJoin = '属性值';5.2 线条操作方法
setLineDash()（定义线条的虚实样式）
代码语言：javascript复制//参数array是一个数组组合，常见的数组组合有：
//[10, 5], [5, 5], [10, 5, 5, 5], [2, 2]
//数组[10, 5]表示的是“10px实线”和“5px空白”重复拼凑组合而成的线型
//数组[10, 5, 5, 5]表示的是“10px实线、5px空白、5px实线、5px空白”重复拼凑组合而成的线型，以此类推
cxt.setLineDash(array);6. 文本操作
6.1 文本操作方法
6.1.1 fillText()（绘制“填充”文本）
代码语言：javascript复制//text：一个字符串文本
//x：表示文本最左边的坐标
//y：表示文本最下边的坐标
//maxWidth：可选，表示允许的最大文本的宽度（单位为px）
cxt.fillText(text, x, y, maxWidth);6.1.2 strokeText()（绘制“描边”文本）
代码语言：javascript复制//text：一个字符串文本
//x：表示文本最左边的坐标
//y：表示文本最下边的坐标
//maxWidth：可选，表示允许的最大文本的宽度（单位为px）
cxt.strokeText(text, x, y, maxWidth);6.1.3 measureText()（用于获取文本的长度）
代码语言：javascript复制//text：一个字符串文本
//该方法返回文本的长度，单位为px
let textWidth = cxt.measureText(text).width;6.2 文本操作属性
6.2.1 font（定义文本字体样式，大小、粗细等）
代码语言：javascript复制//默认值为10px sansserif
cxt.font = 'font-style font-weight font-size/line-height font-family';6.2.2 textAlign（定义文本水平对齐方式）
代码语言：javascript复制//属性值
//start：文本在指定的横坐标开始
//end：文本在指定的横坐标结束
//left：文本左对齐（类似start）
//right：文本右对齐（类似end）
//center：文本的中心被放置在指定的横坐标
cxt.textAlign = '属性值';6.2.3 textBaseline（定义文本垂直对齐方式）
代码语言：javascript复制//alphabetic：文本基线是普通英文字母的基线
//top：文本基线是em方框的顶端
//middle：文本基线是em方框的中心
//bottom：文本基线是em方框的底端
cxt.textBaseline = '属性值';6.2.4 fillStyle（定义画笔“填充”路径的样式）
代码语言：javascript复制cxt.fillStyle = '颜色值';6.2.5 strokeStyle（定义画笔“描边”路径的颜色）
代码语言：javascript复制cxt.strokeStyle = '颜色值';
