擦除一定数量后全部消失的有用 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. Dancing Links 模板

    struct dl{ // x: line, y: column struct node{ int c, left, right, up, down; }; vector<node> a; ...

  2. NOJ——1672剪绳子（博弈）

    [1672] 剪绳子 时间限制: 500 ms 内存限制: 65535 K 问题描述 已知长度为n的线圈,两人依次截取1~m的长度,n, m为整数,不能取者为输. 输入 输入n, m:( 0 < ...

  3. java面试题之如何中断一个线程？

    方法一:调用interrupt方法,通知线程应该中断了: A.如果线程处于被阻塞状态,那么线程将立即退出被阻塞状态,并抛出了一个InterruptedException异常. B.如果线程处于正常活动 ...

  4. javaweb之Filter详解

    一.概念:Filter也称之为过滤器,它是Servlet技术中比较激动人心的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servlet, 静态图片文件或 ...

  5. linux centos7无法连接ssh

    在centos7连接ssh时,参考了以下博文,终于完美解决 https://blog.csdn.net/trackle400/article/details/52755571 1.  首先,要确保Ce ...

  6. es6总结 （五）--函数扩展

  7. Z-Order（转）

    原文转自 http://www.th7.cn/system/win/201406/60715.shtml 窗口在子窗口链中的先后顺序也就是窗口在屏幕上显示时的前后顺序,在子窗口链里位置越靠前的窗口显示 ...

  8. vue 上传文件 和 下载文件

    Vue上传文件,不必使用什么element 的uplaod, 也不用什么npm上找的个人写的包,就用原生的Vue加axios就行了, 废话不多说,直接上代码:html: <input type= ...

  9. AC日记——小木棍【数据加强版】 洛谷 P1120

    题目描述 乔治有一些同样长的小木棍,他把这些木棍随意砍成几段,直到每段的长都不超过50. 现在,他想把小木棍拼接成原来的样子,但是却忘记了自己开始时有多少根木棍和它们的长度. 给出每段小木棍的长度,编 ...

  10. js - 锚点-scrollIntoView()

    document.getElementById("view").scrollIntoView(false);