刮刮卡效果——能否刮出一个未来

前端入坑纪 63

今天来分享一个最近用 canvas 模拟的简易刮刮卡效果

好，详解如下！

OK，first things first！ 点我查看实际效果

刮得是寂寞，才不是卡嘞

HTML 结构

        <div class="cavs_wrp">
            <canvas id="cavs1"></canvas>
            <canvas id="cavs_background"></canvas>
        </div>

两个canvas 相对于 div.cavs_wrp 绝对定位到左上角（0,0）的位置，让他们重叠在一起。#cavs_background则是放在底下，用来绘制奖项的文字内容，一等奖，二等奖，没有奖，等等之类的。

CSS 结构

css没什么需要讲述的，感兴趣的小伙伴，直接去网页链接里看吧

JavaScript 结构

        // 用来绘制底下那个canvas内奖项文字的操作
        function draw_bg_text(num_prise) {
            switch (num_prise) {
                case 1:
                     // 用来获取文字的宽度measureText("First Prize").width，以便确定它的x坐标的位置，下同
                    ctx_bg.fillText("First Prize", (300 - ctx_bg.measureText("First Prize").width) * 0.5, 85);
                    break;
                case 2:
                    ctx_bg.fillText("Second Prize", (300 - ctx_bg.measureText("Second Prize").width) * 0.5, 85);
                    break;
                case 3:
                    ctx_bg.fillText("Third Prize", (300 - ctx_bg.measureText("Third Prize").width) * 0.5, 85);
                    break;
                default:
                    ctx_bg.fillText("None Prize", (300 - ctx_bg.measureText("None Prize").width) * 0.5, 85);
            }
            console.log("prize Level：", num_prise)
        }
        
         // 用来随机生成一个数，0，1，2，3
        function roll_num() {
            return Math.floor(Math.random() * 4)
        }


        var cavs1 = document.getElementById('cavs1');
        var cavs_bg = document.getElementById('cavs_background');
        var cavs_wrp = document.getElementsByClassName('cavs_wrp')[0];

        cavs_wrp.style.cssText = "width:300px;height:150px";
        cavs1.width = cavs_bg.width = 300;
        cavs1.height = cavs_bg.height = 150;


         // 这里是绘制奖项文字的设置，文字大小，文字颜色
        var ctx_bg = cavs_bg.getContext('2d')
        ctx_bg.font = "30px cursive";
        ctx_bg.fillStyle = "#fff";
        draw_bg_text(roll_num());

         // 这里给最上层的canvas画出灰色的蒙层（就是我们要刮掉的东西）
        var ctx = cavs1.getContext('2d');
        ctx.fillStyle = '#ccc';
        ctx.fillRect(0, 0, 300, 150);

       // 以下所有都是滑动时刮刮的效果，简述原理就是在都是灰色的上层canvas上再画圆，当globalCompositeOperation = "destination-out"时，圆和灰色重叠在一起，就是要被搽去的地方
        var startX = startY = oclinetX = oclientY = 0

        function drawing(evt) {
            ctx.globalCompositeOperation = "destination-out"
            ctx.fillStyle = "#fff"
            ctx.beginPath();
            ctx.arc(evt.targetTouches[0].clientX - oclinetX + startX, evt.targetTouches[0].clientY - oclientY + startY, 30, 0, Math.PI * 2)
            ctx.stroke();
            ctx.fill()

            console.log('arc drawing')
        }


        cavs1.addEventListener('touchstart', function(evt) {
            console.log('arc draw start')
            oclinetX = evt.targetTouches[0].clientX
            oclientY = evt.targetTouches[0].clientY
            startX = oclinetX - cavs_wrp.offsetLeft
            startY = oclientY - cavs_wrp.offsetTop

            cavs1.addEventListener('touchmove', function(evt) {
                drawing(evt)
            })
        })


        cavs1.addEventListener('touchend', function(evt) {
            console.log('arc draw end')
            cavs1.removeEventListener('touchmove', function(evt) {
                drawing(evt)
            })
        })

确切的说这个效果，最关键的还是canvas内绘制图像重合时，要设置它们重合后以什么样的方式去展现，globalCompositeOperation就是用来设置这个属性的。具体的，小伙伴可以百度，网上有很具体的属性描述。

总结

刮刮卡已经是一个很常见的效果了。虽然这会儿还去写它，但是感觉收获还是有那么些的。有时候，有些东西，看懂了是一回事。自己真真正正再操作一次，又是另一回事了。也算是给自己加强一回记忆。

好了，到此，本文告一段落！感谢您的阅读！祝你身体健康，阖家幸福！

*****作者原创内容,大家互相支持,谢谢!!!*****

打开支付宝首页搜 625097528 领红包，领到大红包的小伙伴赶紧使用哦！

支持你我，扫一扫红包