HTML+CSS+JS实现canvas仿ps橡皮擦刮卡效果

举报
Java李杨勇 发表于 2021/12/25 12:11:25 2021/12/25
【摘要】 ​  常见网页设计作业题材有 个人、 美食、 公司、体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、  文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CS...

​  常见网页设计作业题材有 个人、 美食、 公司、体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、  文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码,这是一个不错的HTML+CSS+JS实现canvas仿ps橡皮擦刮卡效果制作,画面精明,非常适合初学者学习使用

效果演示: 

主要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>

获取完整源码:
大家点赞、收藏、关注、评论啦 、查看👇🏻👇🏻👇🏻微信公众号【java李杨勇】免费获取👇🏻👇🏻👇🏻

打卡 文章 更新 104/  365天

 专栏推荐阅读:

java项目精品实战案例《100套》

java项目精品实战案例

web前端期末大作业网页实战《100套》

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。