擦除一定数量后全部消失的有用 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. java面试题之wait()，notify()和suspend()，resume()之间的区别

    wait()方法和notify()方法的区别: 这两个方法都是属于Object类中的,也是配套使用的,当调用这两个方法阻塞时要释放占用的锁,而锁是任何对象都具有的,调用任意对象的wait()方法导致线 ...

  2. hdu 3320 计算几何（三维图形几何变换）

    openGL Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...

  3. Nginx报504 gateway timeout错误的解决方法

    转载文章来源:http://www.111cn.net/sys/nginx/90669.htm(若侵删) Nginx报504 gateway timeout错误引起,一个是文件配置问题,另一个是相关处 ...

  4. 【HDOJ5974】A Simple Math Problem（构造，解方程）

    题意:给定A与B,要求构造出一组X,Y,使得X+Y=A,lcm(X,Y)=B A<=2e4,B<=1e9 思路:A的范围较小,考虑以A为突破口 枚举A的约数k,复杂度O(sqrt(A)) ...

  5. Codeforces878C. Tournament

    $n \leq 50000$个人,每个人有$K \leq 10$个属性,现对每一个前缀问:进行比赛,每次任意两人比任意属性,小的淘汰(保证同一属性不会出现两个相同的数),最终有几个人有可能获胜. 明显 ...

  6. Firmware 加载原理分析【转】

    转自:http://blog.csdn.net/dxdxsmy/article/details/8669840 [-] 原理分析 实现机制 总结   前言 前段时间移植 wifi 驱动到 Androi ...

  7. 快充 IC BQ25896 如何判斷 手機插著 adapter 充電器時，adapter Iout 大於限制，adapter Vout 小於 限制，導致 battery 不但沒充電且還需放電。

    若電池在 放電時,ICHGR 為0. 若電池在 充電時,ICHGR有變化.   下面有寫到 charge current 所以不是 discharge current   狀況:           ...

  8. tableView刷新中的问题

    在开始之前先上一张效果图 相信大家都看到了“店铺优惠”这一栏,在这里假设这一栏就是单独的一个cell,当无店铺优惠的时候不可点击在有店铺优惠的时候会弹出优惠列表,选中并返回时会刷新数据,所以弹出视图采 ...

  9. 深入了解Entity Framework框架及访问数据的几种方式

    一.前言 1.Entity Framework概要 Entity Framework是微软以ADO.NET为基础所发展出来的对象关系映射(O/R Mapping)解决方案.该框架曾经为.NET Fra ...

  10. 获取某个元素相对于视窗的位置-getBoundingClientRect

    1. getBoundingClientRect用于获取某个元素相对于视窗的位置集合.集合中有top, right, bottom, left等属性. 语法:这个方法没有参数 rectObject = ...