1.1 线性渐变
语法：
代码语言：javascript复制//x1、y1：表示渐变色开始点的坐标
//x2、y2：表示渐变色结束点的坐标
//1）如果y1和y2相同，表示沿着水平方向从左到右渐变
//2）如果x1和x2相同，表示沿着垂直方向从左到右渐变
//3）如果x1和x2不同，且y1和y2不同，则表示渐变色沿着矩形对角线方向渐变
//value1、value2：表示渐变位置的偏移量，取值为0~1之间任意值，value1表示渐变开始位置，value2表示渐变结束位置
//color1、color2：表示渐变颜色，color1表示渐变开始颜色，color2表示渐变结束颜色
let gnt = cxt.createLinearGradient(x1, y1, x2, y2);
gnt.addColorStop(value1, color1);
gnt.addColorStop(value2, color2);
cxt.fillStyle = gnt;
cxt.fill();
//cxt.fillRect();//矩形渐变
//cxt.fillText();//文字渐变1.2 径向渐变
语法：
代码语言：javascript复制//x1、y1表示渐变开始圆心的坐标，r1表示渐变开始圆的半径
//x2、y2表示渐变结束圆心的坐标，r2表示渐变结束圆的半径
let gnt = cxt.createRadialGradient(x1, y1, r1, x2, y2, r2);
gnt.addColorStop(value1, color1);
gnt.addColorStop(value2, color2);
cxt.fillStyle = gnt;
cxt.fill();1.3 阴影
常见的阴影属性：
1）shadowOffsetX：阴影与图形的水平距离，默认值为0，大于0时向右偏移，小于0时向左偏移；
2）shadowOffsetY：阴影与图形的垂直距离，默认值为0，大于0时向下偏移，小于0时向左偏移；
3）shadowColor：阴影的颜色，默认值为黑色；
4）shadowBlur：阴影的模糊值，默认值为0，该值越大，模糊度越强，该值越小，模糊度越弱。
2. Canvas路径
2.1 beginPath()：开始一条新的路径
Canvas是基于“状态”来绘制图形的，每一次绘制，Canvas会检测整个程序定义的所有状态，这些状态包括strokeStyle、fillStyle、lineWidth等。当一个状态值没有被改变时，Canvas就一直使用最初的值；当一个状态值被改变时，分两种情况：
1）如果使用beginPath()开始一个新的路径，则不同路径使用不同的值；
2）如果没有使用beginPath()开始一个新的路径，则后面的值会覆盖前面的值。
在Canvas中，对于beginPath()，我们可以总结出以下四点：
1）如果画出来的图形跟预期不一样，可以检查一下是否有合理的beginPath()；
2）判断开始一个新路径的唯一标准是是否使用beginPath()，而不是视觉上的首尾相连；
3）使用以下方法只是绘制图形，并不会开始新路径：moveTo()、lineTo()、strokeRect()、fillRect()、rect()、arc()、arcTo()、quadricCurveTo()、bezierCurveTo()；
4）Canvas中的绘制方法如stroke()、fill()等都是以之前最近的beginPath()后面所有定义的状态为基础进行绘制的。
2.2 closePath()：关闭当前路径
“关闭路径”一般是指将同一个路径的起点与终点这两点连接起来，使其成为一个封闭的图形。
beginPath()和closePath()不一定是配对使用的，如果我们需要开始新路径时，应该使用beginPath()，如果我们需要封闭图形（连接起点和终点）时，就应该使用closePath()。
2.3 isPointInPath()：判断某一个点是否存在于当前路径
语法：
代码语言：javascript复制cxt.isPointInPath(x, y);如果点位于当前路径中，返回true，否则返回false。isPointInPath()不支持strokeRect()和fillRect()。
3. Canvas状态
3.1 状态简介
1）如果使用beginPath()开始一个新的路径，则不同路径使用不同的值；
2）如果没有使用beginPath()开始一个新的路径，则后面的状态值会覆盖前面的状态值。
在Canvas中，我们可以使用save()方法来保存当前状态，然后可以使用restore()方法来恢复之前保存的状态。
1）save()方法保存的状态包括三个，剪切状态、变形状态（一般指变换矩阵）和绘图状态；
2）save()不能保存路径状态，如果想要开始新的路径，只有beginPath()一个方法；
3）save()只保存状态，不能保存图形。
3.2 clip()方法
在Canvas中，可以使用clip()方法结合基本图形的绘制来指定一个剪切区域。其中，这个剪切区域是由基本图形绘制出来的，当使用clip()方法指定剪切区域后，后面所有绘制的图形如果超出这个剪切区域，则超出部分不会显示。
clip()方法也不支持strokeRect()和fillRect()。
4. 其他应用
4.1 toDataURL()
可以使用toDataURL()方法来将画布保存为一张图片。
语法：
代码语言：javascript复制//type：表示输出的MIME类型，如果省略，将使用image/png类型
cnv.toDataURL(type);使用toDataURL()方法可以将画布转换为data URL，data URL存储的是图片的数据，有两个用处：
1）发送到Web服务器的数据库，进行长期保存；
2）在浏览器中直接打开，进行本地保存。
对于在浏览器中打开进行本地保存，可以使用：
代码语言：javascript复制window.location = cnv.toDataURL('image/png');4.2 globalAlpha属性
用来定义Canvas环境的透明度，对整个画布都起作用。
语法：
代码语言：javascript复制//取值范围0.0~1.0，默认为1.0,0.0表示完全透明，1.0表示完全不透明
cxt.globalAlpha = 数值;4.3 globalCompositeOperation属性
可以改变交叉图形的显示方式。
语法：
代码语言：javascript复制cxt.globalCompositeOperation = 属性值;属性取值：
globalCompositeOperation属性定义的是整个画布的全局叠加效果，也就是说，如果一个画布中有多个图形叠加，它们也会遵循两两叠加的规则。
