Number four

                                              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");      //将画布的内容给图片标签显示