刮刮乐效果

查看DEMO

html:

<canvas></canvas>

javascript部分：

function imageClip(filter){

    var canvas = document.querySelector(‘canvas‘),
        context = canvas.getContext(‘2d‘),
        img = new Image(), // 图片对象
        finish; // 执行成功函数

    img.src = ‘http://www.jcore.cn/resources/images/2014/09/20/html5-series-clip-pic-0.png‘; // 设置图片
    img.onload = function(e) // 加载图片完成
    {
        var imgw = img.width,  // 图片宽
            imgh = img.height, // 图片高
            offsetX = canvas.offsetLeft, // 距离左边位置
            offsetY = canvas.offsetTop, //  距离上边位置
            mousedown = false; // 是否点击

        // 设置 canvas 宽、高、背景
        canvas.width  = imgw;
        canvas.height = imgh;
        canvas.style.backgroundImage = ‘url(‘+img.src+‘)‘;

        // 设置模糊 颜色、透明度
        context.fillStyle = ‘gray‘;
        context.globalAlpha = 0.6;

        // 绘制图片
        context.fillRect(0,0,imgw,imgh);

        // 模糊层绘制到 canvas 上
        context.globalCompositeOperation = ‘destination-out‘;

        // 按下鼠标事件
        function eventDown(e){
            e.preventDefault(); // 阻止冒泡
            mousedown = true; // 设置为点击事件
        }

        // 抬起鼠标事件
        function eventUp(e){
            e.preventDefault(); // 阻止冒泡
            mousedown = false; // 设置为是否鼠标点击事件
            clearMask(); // 清空模糊层
        }

        // 清空模糊层函数
        function clearMask(){
            var num = 0, // 计数器
                datas = context.getImageData(0,0,imgw,imgh), // 噪点对象
                datasLength = datas.data.length; // 噪点数量
            for (var i = 0; i < datasLength; i++) {
                if (datas.data[i] == 0) num++; // 为0则已经清空，计数器++
            }
            if (num >= datasLength * filter) { // 噪点清空数量大于当前百分比
                if(finish) finish(); // 执行成功函数
            };
        }

        // 移动鼠标事件
        function eventMove(e){
            e.preventDefault(); // 阻止冒泡
            if(mousedown) {
                if(e.changedTouches){ // 手机事件
                    e = e.changedTouches[e.changedTouches.length-1];
                }
                var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0, // X轴坐标
                    y = (e.clientY + document.body.scrollTop  || e.pageY) - offsetY || 0; // Y轴坐标

                // 清空模糊层
                context.beginPath();
                context.arc(x, y, 30, 0, Math.PI * 2); // 画圆
                context.fill();
            }
        }

        // 绑定手机事件
        canvas.addEventListener(‘touchstart‘, eventDown);
        canvas.addEventListener(‘touchend‘, eventUp);
        canvas.addEventListener(‘touchmove‘, eventMove);
        // 绑定浏览器事件
        canvas.addEventListener(‘mousedown‘, eventDown);
        canvas.addEventListener(‘mouseup‘, eventUp);
        canvas.addEventListener(‘mousemove‘, eventMove);
    };

    this.finish = function(callback){
        finish = callback;
    }

}

调用方法：

var clip = new imageClip(0.1);
clip.finish(function(){
  alert("clip success...");
});