canvas之刮刮乐

利用canvas简单实现一个在线刮奖的模拟效果。主要利用了canvas中的save() restore() 以及裁切clip()

实现思路：

给画布填充一个背景色，遮住图片，达到一个蒙层效果，然后利用clip不断去裁切画布，并且使用save 和 restore去保存记录每一次的结果，最终就可以实现这个效果啦

<canvas width="400" height="200"></canvas>
<script>
    var canvas = document.querySelector('canvas');
    // 使用2d来解析
    var ctx = canvas.getContext('2d');
    // 画布填充颜色 灰色
    ctx.fillStyle = '#ccc';
    // 绘制一个矩形的边框
    ctx.fillRect(0,0,400,200);
    // 加载图片
    var img = new Image();
    img.src='./img/timg.jpg';
    img.addEventListener('load',loadHandler);
    function loadHandler(e){
        // 鼠标移动事件
        canvas.addEventListener('mousemove',mouseHandler);
    }
    function mouseHandler(e){
        // 保存当前的状态
        ctx.save();
        // 新建一条路径
        ctx.beginPath();
        // 绘制一个圆形  坐标 半径 弧度（注意角度转弧度）
        ctx.arc(e.offsetX,e.offsetY,10,0,Math.PI/180*360);
        // 使用clip进行裁切，每次的大小都是圆弧大小
        ctx.clip();
        // 添加图片
        ctx.drawImage(img,0,0,canvas.width,canvas.height);
        // 将上次保存的上下文属性恢复出栈，记录
        ctx.restore();
    }
</script>

效果展示：