高级版刮刮乐

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

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>