这篇文章主要讲解了“基于JS怎么实现简易的刮卡效果，方法是什么”，文中的讲解内容简单、清晰、详细，对大家学习或是工作可能会有一定的帮助，希望大家阅读完这篇文章能有所收获。下面就请大家跟着小编的思路一起来学习一下吧。

目录

效果演示：

主要JS代码实现

 <div class="box" id="bb">
        <canvas id="cas" width="1366" height="651"></canvas>
    </div>
 
    <script type="text/javascript" charset="utf-8">
        var canvas = document.getElementById("cas"),
            ctx = canvas.getContext("2d");
        var x1, y1, a = 30,
            timeout, totimes = 100,
            jiange = 30;
        canvas.width = document.getElementById("bb").clientWidth;
        canvas.height = document.getElementById("bb").clientHeight;
        var img = new Image();
        img.src = "sha.jpg";
        img.onload = function() {
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
            //ctx.fillRect(0,0,canvas.width,canvas)
            tapClip()
        }
 
        //通过修改globalCompositeOperation来达到擦除的效果
        function tapClip() {
            var hastouch = "ontouchstart" in window ? true : false,
                tapstart = hastouch ? "touchstart" : "mousedown",
                tapmove = hastouch ? "touchmove" : "mousemove",
                tapend = hastouch ? "touchend" : "mouseup";
 
            ctx.lineCap = "round";
            ctx.lineJoin = "round";
            ctx.lineWidth = a * 2;
            ctx.globalCompositeOperation = "destination-out";
 
            canvas.addEventListener(tapstart, function(e) {
                clearTimeout(timeout)
                e.preventDefault();
 
                x1 = hastouch ? e.targetTouches[0].pageX : e.clientX - canvas.offsetLeft;
                y1 = hastouch ? e.targetTouches[0].pageY : e.clientY - canvas.offsetTop;
 
                ctx.save();
                ctx.beginPath()
                ctx.arc(x1, y1, 1, 0, 2 * Math.PI);
                ctx.fill();
                ctx.restore();
 
                canvas.addEventListener(tapmove, tapmoveHandler);
                canvas.addEventListener(tapend, function() {
                    canvas.removeEventListener(tapmove, tapmoveHandler);
 
                    timeout = setTimeout(function() {
                        var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
                        var dd = 0;
                        for (var x = 0; x < imgData.width; x += jiange) {
                            for (var y = 0; y < imgData.height; y += jiange) {
                                var i = (y * imgData.width + x) * 4;
                                if (imgData.data[i + 3] > 0) {
                                    dd++
                                }
                            }
                        }
                        if (dd / (imgData.width * imgData.height / (jiange * jiange)) < 0.4) {
                            canvas.className = "noOp";
                        }
                    }, totimes)
                });
 
           
                canvas.addEventListener(tapmove, tapmoveHandler);
                canvas.addEventListener(tapend, function() {
                    canvas.removeEventListener(tapmove, tapmoveHandler);
 
                    timeout = setTimeout(function() {
                        var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
                        var dd = 0;
                        for (var x = 0; x < imgData.width; x += jiange) {
                            for (var y = 0; y < imgData.height; y += jiange) {
                                var i = (y * imgData.width + x) * 4;
                                if (imgData.data[i + 3] > 0) {
                                    dd++
                                }
                            }
                        }
 
                    }, totimes)
 
                });
 
            
        }
    </script>
    <script type="text/javascript">
        window.setTimeout('CountDown()', 100);
        // End
    </script>

感谢各位的阅读，以上就是“基于JS怎么实现简易的刮卡效果，方法是什么”的内容了，经过本文的学习后，相信大家对基于JS怎么实现简易的刮卡效果，方法是什么都有更深刻的体会了吧。这里是群英网络，小编将为大家推送更多相关知识点的文章，欢迎关注！

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• stylelint如何安装和配置，正确的使用是怎样的

  eslint的配置引入比较简单，网上有比较多的教程，而stylelint的教程大多语焉不详。在这里，我会介绍一下我在引入stylelint所遇到的坑，以及解决方法

• nodejs中进行建立websocket通信的操作是什么

  依赖模块nodejs-websocket服务端constws=require('nodejs-websocket');console.log('开始建立连接...');constserver=ws.createServer(function(conn){conn.on('text',function(str){console.log('收到的信息为:'

• Jquery的基本使用是怎样，哪些基础知识要掌握

  这篇文章主要讲述了一个JQuery入门基础，实现的过程效果都很简单，特别适合初学者来学习，感兴趣的小伙伴们可以参考一下

• Reduce的使用常见哪些，有什么简单的示例

  目录累加/累积求最大/最小值格式化搜索参数反序列化搜索参数拉平嵌套数组实现 flat数组去重数组计数获取对象多个属性反转字符串不知道大家平常用 Reduce 多不多，反正本瓜用的不多。但实际上，Reduce 能做的，比我们能想到的要多得多，本篇带来 10 个Reduce 常用场景和技巧，一定有你不知道~冲ヾ(◍°∇°◍

• vue中单文件组件怎么样实现？

  这篇文章主要介绍vue实现单文件组件的内容，对大家学习或者复习vue单文件组件的知识有一定的帮助，感兴趣的朋友可以参考下，希望大家阅读完这篇文章能有所收获，接下来小编带着大家一起了解看看。