擦除一定数量后全部消失的有用 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. [图论训练]BZOJ 3245: 最快路线【最短路】

    Description 精 明的小R每每开车出行总是喜欢走最快路线,而不是最短路线.很明显,每条道路的限速是小R需要考虑的关键问题.不过有一些限速标志丢失了,于是小R将不知 道能开多快.不过有一个合理 ...

  2. [NOIP2009] 最优贸易 (最短路,分层图)

    题目链接 Solution 分层图+\(SPFA\). 建立3层图,其中每一层之中的边权赋为0. 对于任意一条边 \(t\) ,其起点 \(x\) 和终点 \(y\). 我们将 \(x\) 在第一层的 ...

  3. ubuntu14.04 python + opencv 傻瓜式安装解决方案

    ubuntu14.04  python + opencv 傻瓜式安装解决方案 ubuntu下使python和opencv来做开发的话,总要花那么点时间来配置环境.我偶然间发现了一种傻瓜式安装办法希望快 ...

  4. charles 抓包工具破解方法

    在线破解地址: https://www.zzzmode.com/mytools/charles/ 之后将下载的jar包替换  charles.app ->右键显示包内容 ->content ...

  5. PHP中的验证码类（验证码功能设计之一）

    <!--vcode.class.php内容--> <?php class Vcode { private $width; //宽 private $height; //高 priva ...

  6. LOJ#2302. 「NOI2017」整数

    $n \leq 1000000$个操作:一,给$x$加上$a*2^b$:二,问$x$的某个二进制位$k$.$b,k \leq 30n$,$|a| \leq 1e9$. 30暴露了一切..可以把30个二 ...

  7. mybatis原理源码大牛连接

    mybatis讲解的非常好的连接: https://www.jianshu.com/nb/5226994 执行流程简介参考:http://www.cnblogs.com/dongying/p/4142 ...

  8. Java后端WebSocket的Tomcat实现 html5 WebSocket 实时聊天

    WebSocket协议被提出,它实现了浏览器与服务器的全双工通信,扩展了浏览器与服务端的通信功能,使服务端也能主动向客户端发送数据.Tomcat7.0.47上才能运行. 需要添加Tomcat里lib目 ...

  9. Codeforces 629 A. Far Relative’s Birthday Cake

      A. Far Relative’s Birthday Cake   time limit per test 1 second memory limit per test 256 megabytes ...

  10. jQuery使用on()绑定动态生成元素的事件无效

    jquery on()方法是jquery1.7+后才使用的 由于需求:动态添加了以下代码 <tr class="pj" data-val="no"> ...