擦除一定数量后全部消失的有用 imageData 方法的 我把代码贴在最下面

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            body{

                overflow: hidden;

            }

            #canvas{

                display: block;

                margin: 0 auto;

                border: 2px solid #008000;

                background: url(img2.jpg) no-repeat;

                background-size: cover;

            }

            *{margin: 0;padding: 0;}

        </style>

    </head>

    <body>

        <canvas id="canvas" width="800" height="400"></canvas>

    </body>

    <script type="text/javascript">

        var cvs = document.getElementById('canvas');

        var ctx = cvs.getContext('2d');

        cvs.width = window.innerWidth;

        cvs.height = window.innerHeight;

        var cvsWidth = cvs.width;

        var cvsHeight = cvs.height;

        var iNow = false;

        var r = 30;

        var num = 0;

        var img =new Image()

        img.src="img1.jpg"        

        var hastouch = "ontouchstart" in window?true:false,

            tapstart = hastouch?"touchstart":"mousedown",

            tapmove = hastouch?"touchmove":"mousemove",

            tapend = hastouch?"touchend":"mouseup";

        img.onload = function(){

            bottomImg();

            clickDraw();

        }

        function bottomImg(){

            ctx.drawImage(img,0,0,cvsWidth,cvsHeight)

        }

        function clickDraw(){

            cvs.addEventListener(tapstart,function(e){

                e.preventDefault();  

                x1 = hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft;

                y1 = hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop;  

                ctx.lineCap = "round";　　//设置线条两端为圆弧

                ctx.lineJoin = "round";　　//设置线条转折为圆弧

                ctx.lineWidth = r*2;　　

                ctx.globalCompositeOperation = "destination-out";  

                ctx.save();

                ctx.beginPath()

                ctx.arc(x1,y1,1,0,2*Math.PI);

                ctx.fill();

                ctx.restore();                  

                iNow = true;

                cvs.addEventListener(tapmove,function(e){

                    e.preventDefault()

                    if( iNow ){

                        var lx = hastouch?e.targetTouches[0].pageX:e.clientX-cvs.offsetLeft;

                        var ly = hastouch?e.targetTouches[0].pageY:e.clientY-cvs.offsetTop;

                        round(lx,ly)

                        num++

                        console.log(num);

                        num>500?ctx.clearRect(0,0,cvsWidth,cvsHeight):''

                    }

                })

            })

            cvs.addEventListener(tapend,function(){

                iNow = false;

            })

        }

        function round(ex,ey){

            x2 = ex

            y2 = ey

            ctx.save();

            ctx.moveTo(x1,y1);

            ctx.lineTo(x2,y2);

            ctx.stroke();

            ctx.restore()  

            x1 = x2;

            y1 = y2;

        }

    </script>

</html>

以下是使用getImageData方式消除剩余部分

//通过修改globalCompositeOperation来达到擦除的效果

function tapClip(){

    var hastouch = "ontouchstart" in window?true:false,

        tapstart = hastouch?"touchstart":"mousedown",

        tapmove = hastouch?"touchmove":"mousemove",

        tapend = hastouch?"touchend":"mouseup";

    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.lineCap = "round";　　//设置线条两端为圆弧

        ctx.lineJoin = "round";　　//设置线条转折为圆弧

        ctx.lineWidth = a*2;　　

        ctx.globalCompositeOperation = "destination-out";

        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+=30){

                for(var y=0;y<imgData.height;y+=30){

                    var i = (y*imgData.width + x)*4;

                    if(imgData.data[i+3] > 0){

                        dd++

                    }

                }

            }

            if(dd/(imgData.width*imgData.height/900)<.4){

                canvas.className = "noOp";

            }

　　　　　　　},100)

        });

        function tapmoveHandler(e){

            e.preventDefault()

            x2 = hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft;

            y2 = hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop;

            ctx.save();

            ctx.moveTo(x1,y1);

            ctx.lineTo(x2,y2);

            ctx.stroke();

            ctx.restore()

            x1 = x2;

            y1 = y2;

        }

    })

}

canvas 橡皮擦效果制作的更多相关文章

  1. 2015.4.25-2015.5.1 字符串去重，比例圆设计，中奖机和canvas橡皮擦效果等

    1.字符串去重,html模板取值   2.javascript正则表达式之$1...$9   3.jquery插件   4.返回上一页并刷新 解决方法: <a href ="javas ...

  2. Canvas 橡皮擦效果

    引子 解决了第一个问题图像灰度处理之后,接着就是做擦除的效果. Origin My GitHub 思路 一开始想到 Canvas 的画布可以相互覆盖的特性,彩色原图作为背景,灰度图渲染到 Canvas ...

  3. Unity 实现橡皮擦效果

    我所实现的橡皮擦效果是设置图片某点的像素的透明度为0,来简单实现擦除效果的: 下面是效果 首先需要注意两点:1:设置 Main Camera 的 projection 属性为Orthographic ...

  4. 10个实用的 CSS3 按钮效果制作教程

    人们往往喜欢那些有更多互动元素的网站,因此现在很多设计师专注于他们的 CSS3 技能.这是因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这里分享的10个优秀的 CSS3 按钮效果制作 ...

  5. CodePen 作品秀：Canvas 粒子效果文本动画

    作品名称——Shape Shifter,基于 Canvas 的粒子图形变换实验.在页面下方的输入框输入文本,上面就会进行变换出对应的粒子效果文本动画. CodePen 作品秀系列向大家展示来自 Cod ...

  6. 模仿京东顶部搜索条效果制作的一个小demo

    最近模仿京东顶部搜索条效果制作的一个小demo,特贴到这里,今后如果有用到可以参考一下,代码如下 #define kScreenWidth [UIScreen mainScreen].bounds.s ...

  7. HTML5 Canvas动画效果演示

    HTML5 Canvas动画效果演示 主要思想: 首先要准备一张有连续帧的图片,然后利用HTML5 Canvas的draw方法在不同的时间 间隔绘制不同的帧,这样看起来就像动画在播放. 关键技术点: ...

  8. HTML5 Canvas动画效果演示 - 流浪的鱼 - 博客频道 - CSDN.NET

    HTML5 Canvas动画效果演示 - 流浪的鱼 - 博客频道 - CSDN.NET HTML5 Canvas动画效果演示

  9. HTML5 Canvas动画效果实现原理

    在线演示 使用HTML5画布可以帮助我们高速实现简单的动画效果.基本原理例如以下: 每隔一定时间绘制图形而且清除图形,用来模拟出一个动画过程,能够使用context.clearRect(0, 0, x ...

随机推荐

  1. 【Luogu】P3787冰精冻西瓜（线段树）

    题目链接 我脑子怕不是有坑qwqqq 用前缀和思想,dis[i]表示i离根的距离,那么修改操作其实是对x的子树区间加y/dis[x],查询的时候*dis[to]即可. 对付/0错的思路是建森林,然而这 ...

  2. 以Java 8 为基准

    1.以Java 8 为基准 Spring Boot 2.0 要求Java 版本必须8以上, Java 6 和 7 不再支持. 2.内嵌容器包结构调整 为了支持reactive使用场景,内嵌的容器包结构 ...

  3. Redis Cluster 集群的实现和管理

    系统环境 CentOS 7 集群规划 在一台物理机(实际部署应当分散到多个物理机上),创建6个Redis节点,其中3个主节点.3个从节点. 节点表: IP 端口 主从 路径 192.168.1.21 ...

  4. 【Eclipse】Eclipse中tomcat的Server配置(解决修改代码不断的重启服务器)以及设置tomcat文件发布位置与JSP编译位置查看

     Eclipse有时候修改一点JS或者JSP都会自动重启,有时候修改完JS或者JSP之后必须重启服务器才生效,下面研究了server的一些选项之后彻底解决了这些问题,下面做记录: 我的 Eclipse ...

  5. C++的静态联编和动态联编详解

    一.概述: 通常来说联编就是将模块或者函数合并在一起生成可执行代码的处理过程,同时对每个模块或者函数调用分配内存地址,并且对外部访问也分配正确的内存地址,它是计算机程序彼此关联的过程.按照联编所进行的 ...

  6. python print 在命令行打印带颜色

    红色 :print "\033[1;31m%s\033[0m" %("ALY : %s" %(['a','b']))

  7. 禁用VMware的vmem文件

    新建一个虚拟机,VMWare会默认为其创建一个虚拟内存文件*.VMEM, 这个文件会影响系统的磁盘性能,所以最好关闭它. 该当是找到*.vmx文件,在文件最后加入一行 mainMem.useNamed ...

  8. ORCLE数据库用户、权限、角色管理

    PS:中括号表示可选项. ORACLE 用户管理 1.创建用户 CREATE USER username   --用户名 IDENTIFIED BY password --密码 [ACCOUNT LO ...

  9. poj 1459(网络流)

    Power Network Time Limit: 2000MS   Memory Limit: 32768K Total Submissions: 26688   Accepted: 13874 D ...

  10. react状态

    组件的生命周期分成三个状态: Mounting:已插入真实 DOM Updating:正在被重新渲染 Unmounting:已移出真实 DOM React 为每个状态都提供了两种处理函数,will 函 ...