高级版刮刮乐

判断当刮到一半的时候，自动显示全部内容

globalCompositeOperation

• source-over 默认。在目标图像上显示源图像。
• source-atop 在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
• source-in 在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。
• source-out 在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。
• destination-over 在源图像上方显示目标图像。
• destination-atop 在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。
• destination-in 在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。
• destination-out 在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。
• lighter 显示源图像 + 目标图像。
• copy 显示源图像。忽略目标图像。
• source-over 使用异或操作对源图像与目标图像进行组合。

像素

我们使用getImageData()能够获取指定区域的像素值ImageData
ImageData中3个属性:width,height和data
width和height表示访问像素区域大小
data是一个包含访问区域所有像素信息的CanvasPixeArray

getImageData(x,y,width,height)

• 获取像素,(x,y)像素区域原点坐标
• width,height像素区域的宽度和高度"