Canvas擦除图片怎么弄？

蒙层我能擦除掉，但是想把蒙层换成图片，怎么擦都没有用了。求大神改下，只是想擦个图片，漏出另一个图片。

CSS

<style>
    *{
        padding: 0;
        margin: 0;
    }

    .wrap {
        width:250px;
        height: 166px;
        position: relative;
        top: 50px;
        left: 50px;
    }

    .wrap img{
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }

    .wrap canvas{
        position: absolute;
        top: 0;
        left: 0;
        z-index: 999;
    }
</style>

<script>
    window.onload = function(){
        var myCanvas = document.getElementById("myCanvas");
        var oCon = document.getElementById("con");
        var gray = myCanvas.getContext("2d");            

        gray.beginPath(); //起始一条路径
        gray.fillStyle = "#999";
        gray.fillRect(0,0,250,166); //绘制矩形 x轴距 y轴距 width height
        gray.closePath(); //创建从当前点回到起始点的路径
        // var img = new Image();
        // img.src = "blue.jpg";
        // oCon.appendChild(img);
        // img.onload = function(){
        //     gray.drawImage(img,0,0);
        // }

        gray.globalCompositeOperation = "destination-out";

        myCanvas.addEventListener("touchstart",function(e){
            myCanvas.addEventListener("touchmove",function(e){
                e.preventDefault();
                var num = 0;
                var x = e.targetTouches[0].clientX + document.body.scrollLeft - oCon.offsetLeft;
                var y = e.targetTouches[0].clientY + document.body.scrollTop - oCon.offsetTop;
                var dataArea = gray.getImageData(0,0,250,166);
                gray.beginPath();
                gray.fillStyle = "#f00"; //设定要填充的颜色
                gray.arc(x,y,20,0,Math.PI*2)
                gray.fill(); //开始填充颜色
                gray.closePath();
                for (var i = 0; i < dataArea.data.length; i++) {
                    if (dataArea.data[i] == 0) {
                        num ++;
                    };
                };
                if (num >= dataArea.data.length * 0.5) {            
                    gray.fillRect(0,0,250,166);                
                };
            })
        });
    }
</script>

<body>
    <div id="con" class="wrap">
        <!-- <img src="blue.jpg" width="250" height="166" id="bg"> -->
        <canvas id="myCanvas" width="250" height="166"></canvas>
    </div>
</body>

你可以试试：globalCompositeOperation 组合多个图形
参考：http://w3school.com.cn/tags/canvas_globalcompositeoperation.asp
实例：http://w3school.com.cn/tiy/t.asp?f=html5_canvas_globalcompop_all
不过他还漏了个darker，跟lighter相对。

第一：先判断图片的onload，再做后续处理，否则会出很多幺蛾子。第二：oCon.appendChild(img)这个代码是把图片放在canvas后面去了，这样你怎么擦都擦不出来的。以下是部分代码

var img = new Image();
img.src = "blue.jpg";
oCon.insertBefore(img, myCanvas);
img.onload = function(){
...
gray.globalCompositeOperation = "destination-out";
myCanvas.addEventListener("touchstart",function(e){
...
})
myCanvas.addEventListener("touchend",function(e){
//释放时再判断是否已经擦除了1半
});
}

【热门文章】