canvas之刮刮乐

最新推荐文章于 2023-11-14 17:28:24 发布

原创最新推荐文章于 2023-11-14 17:28:24 发布 · 346 阅读

0 ·

CC 4.0 BY-SA版权

JS 同时被 2 个专栏收录

15 篇文章

订阅专栏

canvas

2 篇文章

订阅专栏

本文介绍如何使用HTML5的Canvas API实现在线刮奖效果。通过填充背景色形成蒙层，利用clip()裁切显示图片，结合save()和restore()保存状态，实现动态刮奖体验。

利用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>