判断当刮到一半的时候，自动显示全部内容
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像素区域的宽度和高度"
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
//目标图
context.beginPath();
context.fillStyle = "gray";
context.fillRect(0,0,canvas.offsetWidth,canvas.offsetHeight);
context.fill();
context.globalCompositeOperation = "destination-out";
canvas.onmousedown = function(e){
var ev = window.event || e;
var x = ev.clientX - canvas.offsetLeft;
var y = ev.clientY - canvas.offsetTop;
context.beginPath();
context.moveTo(x,y);
canvas.onmousemove = function(e){
var ev = window.event || e;
var xx = ev.clientX - canvas.offsetLeft;
var yy = ev.clientY - canvas.offsetTop;
context.lineTo(xx,yy);
context.lineWidth = 30;
context.stroke();
all()
}
}
function all(){
var imageData = context.getImageData(0,0,canvas.offsetWidth,canvas.offsetHeight);
var count = 0;
for(var i = 0;i < imageData.data.length;i+=4){
if(imageData.data[i+3] == 0){
count++;
if(count >= imageData.data.length/16) {
context.clearRect(0,0,canvas.offsetWidth,canvas.offsetHeight);
}
}
}
}
document.onmouseup = function(){
canvas.onmousemove = "";
}
</script>
