在canvas中插入图片(需要image对象)
1.canvas操作图片时，必须要等图片加载完才能操作
2.drawImage(image, x, y, width, height)
其中 image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。
这个方法多了2个参数：width 和 height，这两个参数用来控制 当像canvas画入时应该缩放的大小
在canvas中设置背景(需要image对象)
1.createPattern(image, repetition)
image:图像源
epetition:
"repeat"
"repeat-x"
"repeat-y"
"no-repeat"
一般情况下，我们都会将createPattern返回的对象作为fillstyle的值
渐变
canvas渐变（线性渐变）
createLinearGradient(x1, y1, x2, y2)
表示渐变的起点 (x1,y1) 与终点 (x2,y2)
gradient.addColorStop(position, color)
gradient :createLinearGradient的返回值
addColorStop 方法接受 2 个参数，
position 参数必须是一个 0.0 与 1.0 之间的数值，表示渐变中颜色所在的相对位置。
例如，0.5 表示颜色会出现在正中间。
color 参数必须是一个有效的 CSS 颜色值（如 #FFF， rgba(0,0,0,1)，等等）
canvas渐变（径向渐变）
createRadialGradient(x1, y1, r1, x2, y2, r2)
前三个参数则定义另一个以(x1,y1) 为原点，半径为 r1 的圆，
后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆。
day09
1.注意点
---canvas图像的渲染有别于html图像的渲染，
canvas的渲染极快，不会出现代码覆盖后延迟渲染的问题
写canvas代码一定要具有同步思想
---在获取上下文时，一定要先判断
---画布高宽的问题
画布默认高宽300*150
切记一定要使用html的attribute的形式来定义画布的宽高
通过css形式定义会缩放画布内的图像
---绘制矩形的问题
a.边框宽度的问题，边框宽度是在偏移量上下分别渲染一半，可能会出现小数边框，
一旦出现小数边框都会向上取整
b.canvas的api只支持一种图像的直接渲染：矩形
---我们没法使用选择器来选到canvas中的图像
2.画布api
oc.getContext("2d"):获取画布的2d上下文
oc.width:画布在横向上css像素的个数
oc.height:画布在纵向上css像素的个数
oc.toDataUrl():拿到画布的图片地址
3.上下文api
ctx.fillRect(x,y,w,h):填充矩形
ctx.strokeRect(x,ymwmh):带边框的矩形
ctx.clearRect(0,0,oc.width,oc.height):清除整个画布
注意原点的位置
ctx.fillStyle:
填充颜色
背景fillStyle的值可以是createPattern(image, repetition)返回的对象
线性渐变fillStyle的值可以是createLinearGradient(x1, y1, x2, y2))返回的对象
addColorStop(position, color)
径向渐变fillStyle的值可以是createRadialGradient(x1, y1, r1, x2, y2, r2)返回的对象
addColorStop(position, color)
ctx.strokeStyle:线条颜色
ctx.lineWidth：线条宽度
ctx.lineCap：线条两端的展现形式
ctx.lineJoin：线条连接处的展现形式
ctx.moveTo(x,y):将画笔抬起点到x，y处
ctx.lineTo(x,y):将画笔移到x，y处
ctx.rect(x,y,w,h)
ctx.arc(x,y,r,degS,degE,dir)
ctx.arcTo(x1,y1,x2,y2,r):2个坐标，一个半径
结合moveTo(x,y)方法使用，
x,y:起始点
x1,y1：控制点
x2,y2：结束点
ctx.quadraticCurveTo(x1,y1,x2,y2)
结合moveTo(x,y)方法使用，
x,y:起始点
x1,y1：控制点
x2,y2：结束点
必须经过起点和终点
ctx.bezierCurveTo(x1, y1, x2, y2, x3, y3)
结合moveTo(x,y)方法使用，
x,y:起始点
x1,y1：控制点
x2,y2：控制点
x3，y3：结束点
必须经过起点和终点
ctx.fill()
ctx.stroke()
ctx.beginpath():清除路径容器
ctx.closepath():闭合路径
fill自动闭合
stroke需要手动闭合
ctx.save()
将画布当前状态(样式相关 变换相关)压入到样式栈中
ctx.restore()
将样式栈中栈顶的元素弹到样式容器中
图像最终渲染依赖于样式容器
ctx.translate(x,y):将原点按当前坐标轴位移x，y个单位
ctx.rotate(弧度):将坐标轴按顺时针方向进行旋转
ctx.scale(因子):
放大：放大画布，画布中的一个css像素所占据的物理面积变大，画布中包含的css像素的个数变少
画布中图像所包含的css像素的个数不变
缩小：缩小画布，画布中的一个css像素所占据的物理面积变小，画布中包含的css像素的个数变多
画布中图像所包含的css像素的个数不变
ctx.drawImage(img,x,y,w,h)
:在canvas中引入图片一定在图片加载完成之后再去操作
ctx.measureText("文本")
:返回一个持有文本渲染宽度的对象
ctx.fillText()
ctx.strokeText()
ctx.font
ctx.textAlign
ctx.textBaseline
shadowOffsetX = float
shadowOffsetY = float
shadowBlur = float
shadowColor = color(必需项)
ctx.getImageData(x,y,w,h)
ImageData对象
width：选中区域在横向上css像素的个数
height：选中区域在纵向上css像素的个数
data:数组
选中区域所有像素点的rgba信息，rgba的取值从0到255
ctx.putImageData(imgdata,x,y)
ctx.createImageData(w,h)
返回的是imgdata对象 默认像素点的信息是rgba(0,0,0,0)
ctx.globalAlpha
取值为0到1
ctx.globalCompositeOperation
source-over(默认值):源在上面,新的图像层级比较高
source-in :只留下源与目标的重叠部分(源的那一部分)
source-out :只留下源超过目标的部分
source-atop:砍掉源溢出的部分
destination-over:目标在上面,旧的图像层级比较高
destination-in:只留下源与目标的重叠部分(目标的那一部分)
destination-out:只留下目标超过源的部分
destination-atop:砍掉目标溢出的部分
ctx.ispointinpath(x,y)
x,y这个点是否在路径上
4.实例
时钟动画：结合了所有基础api
飞鸟动画：结合图片创建动画
马赛克：像素操作
刮刮卡：合成+像素操作
