canvas的语法介绍及使用：

1.canvas基本使用
①.<canvas></canvas>默认宽高300X150，通过css设置宽高只是改变它在浏览器上的显示，把它当作图片保存下来依然是300X150，所以不要在css中设置宽高。
可以通过元素的属性改变它的宽高。
<canvas id=“myCanvas” width=“200” height=“200”></canvas>
②.canvas DOM对象
属性：width height
方法：getContext(‘2d’)
使用步骤：
第一步：获取canvas画布元素
var myCanvas = document.getElementById(‘myCanvas’);
第二步：设置画布的大小 myCanvas.width = 600; myCanvas.height = 600;
第三步：获取绘图上下文（绘图环境）var ctx = myCanvas.getContext(‘2d’);
第四步：使用绘图上下文绘制各种图形
ctx.fillStyle = ‘#ccc’;
ctx.fillRect(0, 0, 600, 600);
绘制出一个600X600的颜色是#ccc的图形。
2.路径操作
2.1线段
①.设置绘制起点
语法：ctx.moveTo(x, y);
ctx.moveTo(10,10);
参数：x,y 都是相对于 canvas盒子的最左上角。
注意：绘制线段前必须先设置起点，不然绘制无效。
②.绘制直线
语法：ctx.lineTo(x, y);
ctx.lineTo(100,100);
参数：x,y 线头点坐标。
2.2路径开始和闭合
ctx.beginPath();使前面的路径结束。每次执行此方法，表示重新绘制一个路径并关闭之前的路径。
ctx.closePath();把路径闭合，闭合路径会自动把最后的线头和开始的线头连在一起。
开始路径每次都要写，闭合路径看需求。
2.3路径的填充和描边
路径填充：
ctx.fillStyle = ‘yellow’;设置填充颜色 默认是黑色
ctx.fill();填充
路径描边：
ctx.strokeStyle = ‘green’;设置描边的颜色
ctx.lineWidth = 10;设置描边的宽度
ctx.stroke();描边(描路径)
描边是上面描一半,下面描一半,填充从中间填。描边和填充顺序不同，结果不同。
2.4路径样式设置
①.设置线段末端
ctx.lineCap = ‘round’;
butt : 线段末端以方形结束。(默认值)
round : 线段末端以圆形结束。
square : 线段末端以方形结束。
圆的和方的那块都是多出来的。
描边的颜色和宽度要是自己没有设置，就找前面的最近一次的设置。
②.设置线段连接处
ctx.lineJoin = ‘round’;
miter : 直角 （默认值）
round : 圆角
bevel : 斜角
闭合的图一定要用闭合路径，不然夹角会有问题。
2.5矩形
①.绘制矩形：方法一：画四个点，闭合。
方法二：canvas 提供了矩形路径工具
ctx.beginPath();
ctx.rect(100,300,200,50);
参数1，参数2 矩形左上角在画布中的坐标点，参数3，参数4 矩形宽高
该方法需要对路径的开启和关闭。根据需求填充和描边。
ctx.stroke();
②.快速矩形
快速填充矩形：ctx.fillRect(100,500,200,100);默认填充色是黑色，若想填充其它颜色，要在fillRect()之前写。
参数同 rect 方法，该方法内部对路径的开启和关闭进行了封装。
快速描边矩形：ctx.strokeRect(100,300,200,100);默认描边颜色是黑色，若想描边其它颜色，要在strokeRect()之前写。
参数同 rect 方法，该方法内部对路径的开启和关闭进行了封装。
快速清除矩形：ctx.clearRect(200,150,300,200);
参数同 rect 方法，绘制一个清除矩形，可以用来清空画布。
2.6圆弧
ctx.arc(200, 200, 100, 0, Math.PI * 2);
参数1，参数2：圆心坐标
参数3：半径
参数4，参数5：圆的起始弧度与结束弧度
0弧度是三点钟方向。
360度 = 2π弧度
180度 = π弧度
2.7切线圆弧
ctx.arcTo(150,20,150,70,50); 创建介于两个切线之间的弧：
参数1，参数2：弧的直角点坐标
参数3，参数4：弧的终点坐标
参数5：弧的半径
ctx.lineTo(300,50);
ctx.arcTo(400,50,400,200,100);
要先定义好线段的连接点。
3.变换
3.1变换操作-位移
位移，不影响前面的图像，影响后面所有图像。
位移的是绘图上下文， 即画布的坐标系。
画布的坐标系默认在左上角，x轴向右，y轴向下。
ctx.translate(200, 200);
3.2变换操作-缩放
缩放的是画布坐标系，影响后面的。
ctx.scale(.5, .5);
3.3变换操作-旋转
旋转的是画布坐标系，影响后面的。
ctx.rotate(45 / 180 * Math.PI);顺时针旋转45°。
3.4绘图环境的保存和还原
保存当前绘图环境ctx.save();在变换之前写
恢复之前保存的绘图环境ctx.restore();在变换之后写
在这个绘图环境中作图，若恢复之前的绘图环境，这之中的代码不会影响之后的。注意：需要的开启路径不可少。
4.文字操作
4.1文字操作
方法：（快速方法，内部封装了路径，无需开启路径）
①.填充文字：ctx.fillText(‘你好’, 100, 100);
②.描边文字：ctx.strokeText(‘你好’, 100, 300);
③.填充+描边：把位置设置成一样
ctx.fillText(‘你好’, 100, 500);
ctx.strokeText(‘你好’, 100, 500);
属性：
①.ctx.font设置字体样式（大小，粗细，字体类型）。值同css的font属性相同。
ctx.font = ‘bold 100px 宋体’;
②.ctx.textAlign设置文字的水平对齐方式
start：默认。文本在指定的位置开始。
center：文本的中心被放置在指定的位置的中心。
end：文本在指定的位置结束。
其中的指定位置是填充描边文字时指定的文字放置位置。
ctx.textAlign = ‘start’;
③.ctx.textBaseline 设置文字的垂直对齐方式
alphabetic：默认。基线对齐。
top：顶线对齐。
middle：中线对齐。
bottom：底线对齐。
ctx.textBaseline = ‘bottom’;
4.2文字在画布中水平垂直对齐
ctx.textAlign = ‘center’;
ctx.textBaseline = ‘middle’;
ctx.strokeText(‘你好’, canvas.width/2, canvas.height/2);
5.复杂样式
5.1渐变
①.线性渐变
var gradient = ctx.createLinearGradient(100,100,500,100);
参数1，参数2，参数3，参数4 的连线决定了渐变的方向和区间。
从100，100渐变到500，100。
gradient.addColorStop(0,‘pink’);
gradient.addColorStop(1,‘skyblue’);
参数1 ： 只能是0–1的小数 渐变的起始位置 参数2 ：颜色
ctx.fillStyle = gradient;把渐变对象作为颜色
ctx.fillRect(100,100,300,50);在这个快速矩形中能看到渐变效果。
②.径向渐变
var gradient = ctx.createRadialGradient(400, 300, 100, 400, 300, 200);
参数1，参数2，参数3，第一个小圆的圆心和半径 参数4，参数5，参数6，第二个大圆的圆心和半径。
渐变发生在2个圆之间，剩下的用法和线性渐变一样。
5.2背景图
ctx.createPattern(imgNode,‘no-repeat’);
第一个参数： 规定要使用的图片元素
第二个参数： 背景图平铺方式
repeat ： 默认。该模式在水平和垂直方向重复。
no-repeat： 该模式只显示一次（不重复）。
repeat-x ： 该模式只在水平方向重复。
repeat-y ： 该模式只在垂直方向重复。
示例：把背景图像作为颜色，然后填充矩形。
imgNode是dom元素，等dom元素加载完毕再创建pattern对象。
var imgNode = document.createElement(‘img’);
imgNode.src = ‘1.jpg’;
imgNode.onload = function () {
      var p = ctx.createPattern(imgNode,‘no-repeat’);
      ctx.fillStyle = p;
      ctx.fillRect(100,100,100,100);
}
5.3阴影
ctx.shadowOffsetX = 10;阴影水平方向偏移量
ctx.shadowOffsetY = 10;阴影垂直方向偏移量
ctx.shadowBlur = 10;阴影模糊程度
ctx.shadowColor = ‘red’;阴影颜色设置
设置完，后面的所有都有阴影，前面的没有。
若不想让后面的有阴影，把这些设置放在绘图环境的保存和还原中。
5.4不透明度
ctx.globalAlpha = .5;
参数是个数字， 必须介于 0.0（完全透明） 与 1.0（不透明） 之间。
设置完，后面的所有都有不透明度，前面的没有。
若不想让后面的有不透明度，把这些设置放在绘图环境的保存和还原中，或者把值改为1。
6.图像操作
6.1加载图片
ctx.drawImage(imgNoed, 100, 100, 200, 400);
参数1：图片的 dom 对象
参数2，参数3：图片在画布中显示的初始位置
参数4，参数5：图片在画布中的宽度与高度，可省略
若让高度随着宽度变化，可设置宽度大小，然后把高度设置成：宽度*(imgNode.height/imgNode.width)。
操作步骤：
首先，需要使用图片就得有 img 元素
其次，引入图片路径
然后，等图片加载完成后再去设置图片显示
最后，图片显示
var imgNode = document.createElement(‘img’);
imgNode.src = ‘1.png’;
imgNode.onload = function () {
      ctx.drawImage(imgNode,100,100,300,300*(imgNode.height/imgNode.width));
}
6.2图片合成
属性:globalCompositeOperation 设置或返回如何将一个源图像绘制到目标图像上。
绘制的第一个矩形为目标图像，绘制的第二个矩形为源图像。
在源图像上面写图像合成规则。
ctx.globalCompositeOperation = ‘source-over’;
source-over 默认。在目标图像上显示源图像。
source-atop 在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
source-in 在目标图像中显示源图像。只有目标图像之内的源图像部分会显示，目标图像是透明的。
source-out 在目标图像之外显示源图像。只有目标图像之外的源图像部分会显示，目标图像是透明的。
destination-over 在源图像上显示目标图像。
destination-atop 在源图像顶部显示目标图像。目标图像位于源图像之外的部分是不可见的。
destination-in 在源图像中显示目标图像。只有源图像之内的目标图像部分会被显示，源图像是透明的。
destination-out 在源图像之外显示目标图像。只有源图像之外的目标图像部分会被显示，源图像是透明的。
lighter 显示源图像 + 目标图像。源图像和目标图像重合的位置颜色会中和。
copy 只显示源图像。
xor 源图像和目标图像重合的位置不显示。
6.3像素操作
①.读取像素
ctx.getImageData(100, 100, 100, 100);
第一个参数，第二个参数： 矩形的起始位置
第三个参数，第四个参数： 矩形的大小
返回值： imageData 对象
width : 该区域横向上像素点的个数
height : 该区域纵向上像素点的个数
data : 该区域所有像素点的 rgba 信息
注意：若矩形的大小是100X100，共有10000个像素点，一个像素点有4个值(rgba)组成。所以.data.length是40000。
②.写入像素
先读取像素：var imgData = ctx.getImageData(100, 100, 100, 100);
再写入像素：ctx.putImageData(imgData,1300,200);
参数：填入的对象,填充区域水平坐标点,填充区域垂直坐标点。
③.创建像素
var imgData = ctx.createImageData(100, 100);
参数：宽度，高度
返回一个 ImageData对象
创建的颜色是黑色透明色 [0,0,0,0]
7.画布操作
7.1画布裁剪
ctx.clip();该方法会根据路径进行裁剪，所以放在路径操作之后。
绘制矩形路径，利用路径圈定一块区域，以后只有把图像绘制到该区域内，才能显示。
ctx.beginPath();
ctx.rect(200,200,200,200);
ctx.clip();
ctx.drawImage(imgNode,100,100);
7.2画布编码
canvas.toDataURL(‘image/jpeg’);可设置给另一个dom元素的src。
参数：设置输出的类型，比如 image/png image/jpeg等
输出画布编码，输出图像的base64编码。
console.log(canvas.toDataURL(‘image/jpeg’));
7.3画布渲染画布
创建两个宽高一样的画布。
隐藏其中的一个画布，canvas1.style.display = ‘none’;
获取两个绘图上下文，在隐藏的那个画布上绘图。
把隐藏的画布渲染到那个未隐藏的画布上。ctx2.drawImage(canvas1, 0, 0);
作用：这是一种优化手段，在隐藏的画布上绘制时，浏览器不会渲染，最后画布渲染画布的时候才会渲染。