擦除一定数量后全部消失的有用 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. windows命令总结

    工作中还是经常使用windows系统,将windows中常用的命令进行总结. 1. 从命令行打开资源管理器,即文件夹 start . 2. 查看端口占用情况 比如查看3000端口的占用情况 netst ...

  2. Windows上安装DB2——从IBM官网得到90天试用版

    我在下面选的90天试用版: https://www.ibm.com/developerworks/cn/downloads/im/db2/ 进入下载页面,选择Windows https://www-0 ...

  3. 96. Unique Binary Search Trees（I 和 II）

    Given n, how many structurally unique BST's (binary search trees) that store values 1-n? For example ...

  4. Linux 系统自动备份数据库及定时任务的设置

    首先想到数据库的自动备份,由于涉及业务原因需要在每天固定的时间去调用方法执行备份.如果不考虑业务要求,只考虑实现的话可以通过Linux系统提供的定时任务去完成备份操作. 本文讲的就是利用Linux系统 ...

  5. Python基础教程总结（二）

    上周总结了一下Python的一些基本数据类型和用法.这次总结一下4-9章的内容,完后,赶紧学以致用吧. 5. 第四章——字典:当索引不好用时 字典是Python中唯一内建的映射类型.字典中的值并没有特 ...

  6. nginx 变量 + lua

    nginx变量使用方法详解(8) nil.null与ngx.null 发现一个nginx LUA开发Web App的框架 nginx是个好东西, nginx的openrtsy发行版本更是个好东西. 今 ...

  7. best corder MG loves gold

    MG loves gold  Accepts: 451  Submissions: 1382  Time Limit: 3000/1500 MS (Java/Others)  Memory Limit ...

  8. 【BZOJ4034】T2（树链剖分）

    题意: 有一棵点数为 N 的树,以点 1 为根,且树点有边权.然后有 M 个 操作,分为三种: 操作 1 :把某个节点 x 的点权增加 a . 操作 2 :把某个节点 x 为根的子树中所有点的点权都增 ...

  9. UML学习倒腾记

    先看到http://www.jianshu.com/p/1256e2643923这篇博客,号称21分钟入门uml,也许是我太笨了吧,一下午也没有完全搞定: 使用过atom编辑器,没有完全运行出来结果. ...

  10. 使用redis-stat来监控redis实例

    https://blog.csdn.net/xiao_jun_0820/article/details/78189576 https://blog.csdn.net/u010022051/articl ...