canvas
1.绘制图片
* 基本绘图 drawImage(img, x, y)
* 绘图并设置大小 drawImage(img, x, y, w, h)
* 裁剪图片 drwaImage(img, sx, sy, sw, sh, x, y, w, h) 先写原图的左边大小，在写画布的坐标大小
2.阴影（了解一下 ，少用 性能差）
*类比css3的阴影
* shadowColor 属性 设置返回用于阴影的颜色
* shadowBlur 属性 模糊值 ·大于1的正整数，数值越高，模糊程度越大
* shadowOffsetX 属性 水平方向的偏移量
* shadowOffsetY 属性 垂直方向的偏移量
ctx.fillStyle = "rgba(255,0,0, .9)"
ctx.shadowColor = "teal";
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.fillRect(100, 100, 100, 100);
//绘制矩形
cxt.fillRect(100,100,200,100);
cxt.fillStyle = "red";
cxt.shadowColor = "pink";
cxt.shadowBlur = 5;
cxt.shadowOffsetX = 5;
cxt.shadowOffsetY = 5;
3.渐变
##### 线性渐变
* createLinearGradient(x0, y0, x1, y1);
* graObj.addColorStop(位置， 颜色) 位置是0~1之间的小数
##### 径向渐变
* createRedialGradient(x0, y0, r0, x1, y1, r1);
* graObj.addColorStop(位置， 颜色)
5.填充背景
* createPattern(img, repeat) 第二个参数是填充方式
* repeate
* repeate-x
* repeate-y
* no-repeate
* 填充对象跟渐变对象类似，相当于一种颜色
6.1.变换 - 缩放
scale（w,h）
·scale()方法缩放当前绘图，更大或更小
·语法：context.scale(scalewidth,scaleheight)
oscalewidth :缩放当前绘图的宽度(1=100%, 0.5=50%, 2=200%,依次类推)
oscaleheight :缩放当前绘图的高度(1=100%, 0.5=50%, 2=200%, etc.) +注意：缩放的是整个画布，缩放后，继续绘制的图形会被放大或缩小。
6.2.变换 - 位移
translate(w, h)
·ctx.translate(x,y)方法重新映射画布上的(0,0)位置
·参数说明：
·x： 添加到水平坐标（x）上的值
·y： 添加到垂直坐标（y）上的值
·发生位移后，相当于把画布的0,0坐标 更换到新的x,y的位置，所有绘制的新元素都被影响。
6.3.变换 - 旋转
rotate(angle) 弧度
·context.rotate(angle);方法旋转当前的绘图
·注意参数是弧度（PI）
·如需将角度转换为弧度，请使用degrees*Math.PI/180公式进行计算。
7.绘图环境的保存和释放
*·ctx.save()保存当前环境的状态
o 可以把当前绘制环境进行保存到缓存中。
* ctx.restore() 释放前面保存的绘图环境
o 获取最近缓存的ctx
·一般配合位移画布使用。
8.设置绘制环境的透明度（了解）
·context.globalAlpha=number;
·number:透明值。必须介于0.0（完全透明） 与1.0（不透明） 之间。
·设置透明度是全局的透明度的样式。注意是全局的。
9.画布限定区域绘制（了解）
·ctx.clip();方法从原始画布中剪切任意形状和尺寸
·一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）
·一般配合绘制环境的保存和还原。
10.画布保存base64编码内容
·把canvas绘制的内容输出成base64内容。
·语法：canvas.toDataURL(type, encoderOptions);
·例如：canvas.toDataURL("image/jpg",1);
·参数说明：
otype，设置输出的类型，比如image/png image/jpeg等
oencoderOptions：0-1之间的数字，用于标识输出图片的质量，1表示无损压缩，类型为：image/jpeg或者image/webp才起作用。
案例1：
var canvas = document.getElementById("canvas");
var dataURL = canvas.toDataURL();
console.log(dataURL);
// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"
var img = document.querySelector("#img-demo");//拿到图片的dom对象
img.src = canvas.toDataURL("image/png"); //将画布的内容给图片标签显示