蚂蚁论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

查看: 44|回复: 0

js canvas实现擦除动画

[复制链接]

1923

主题

1

好友

1591

积分

管理员

Rank: 64Rank: 64Rank: 64Rank: 64

  • TA的每日心情
    奋斗
    2016-1-22 16:23
  • 签到天数: 4 天

    [LV.2]偶尔看看I

    荣誉管理 论坛元老 热心会员 活跃会员 最佳新人 灌水之王

    发表于 7 天前 |显示全部楼层
    js canvas实现擦除动画
    本文实例为大家分享了canvas擦除动画的实现原理、实现代码、以及在实现过程中遇到的问题,供大家参考,具体内容如下
    原理总结为就是在移动设备上将某张图片擦掉显示另一张图片,利用canvas来实现。
    如果是用户手动擦除,则需要监听touchmove,touchend等事件,并计算相应的坐标,利用canvas的clearRect或rect 画弧线或画线来实现。但是这会造成在androd手机上存在卡顿的现象。
    canvas有个global**positeOperation属性,这个属性的默认值是source-over,即当你在已有像素上进行绘图时会叠加。但是还有一个属性是destination-out,即在源图像外显示自己的目标图像,也就是在已有像素基础上绘图时,你绘制的区域里已有像素会被置为透明,有了这个属性后就意味着不需要用到clip等系列函数,直接用粗线条或者弧线就可以了,这样一来就减少绘图环境api的调用,性能会得到提升,在android上运行也会流畅很多。
    下面来展示下我的擦除代码:



    let requestAnimationFrame =
      windowrequestAnimationFrame ||
      windowmozRequestAnimationFrame ||
      windowwebkitRequestAnimationFrame ||   windowmsRequestAnimationFrame;
    let cancelAnimationFrame = windowcancelAnimationFrame || windowmozCancelAnimationFrame;
    let a = 60;

    let canvasCleaner = documentgetElementById('cas-1');
    let ctxCleaner = canvasCleanergetContext('2d');
    let canvasCleanerBox = documentquerySelector('slide-4');
    let imgCleaner = new Image();
    canvasCleanerwidth = canvasCleanerBoxclientWidth * 2;
    canvasCleanerheight = canvasCleanerBoxclientHeight * 2;
    canvasCleanerstylewidth = canvasCleanerBoxclientWidth + 'px';
    canvasCleanerstyleheight = canvasCleanerBoxclientHeight + 'px';
    imgCleanersrc = 'https://gwalicdn/tps/TB1XbyCKVXXXXXEXpXXXXXXXXXX-1080-1920jpg';
    imgCleaneronload = ()=gt; {
        let width = parseInt(canvasCleanerstylewidth);
        w = canvasCleanerwidth*(imgCleanerheight/imgCleanerwidth);
        ctxCleanerdrawImage(imgCleaner, 0, 0, canvasCleanerwidth, w );

      ctxCleanerlineCap = 'round';//lineCap 属性设置或返回线条末端线帽的样式。
      ctxCleanerlineJoin = 'round';
      ctxCleanerlineWidth = 100;//设置或返回当前线条的宽度
      ctxCleanerglobal**positeOperation = 'destination-out';
    }

    let drawline = (x1, y1,ctx)=gt; {
      ctxsave();
      ctxbeginPath();
      ctxarc(x1,y1, a, 0, 2 * MathPI);
      ctxfill();//fill() 方法填充当前的图像(路径)。默认颜色是黑色。
      ctxrestore();
    };
    /* d 为擦除区域点坐标,我自己模拟需要擦除的形状得到的数据类似如下:
    let d2 = [
      [1,190],[30,180],[60,170],[90,168],[120,167],[150,165],[180,164],[210,163],[240,160],[270,159],[300,154],[330,153],[360,152],
      [390,150],[420,140],[450,130],[480,120],[510,120],[540,120],[570,120],[600,120],[630,120],[660,120],[690,120],[720,120],
      [1,190],[20,189],[28,186],[45,185],[50,185],[62,184],[64,182],[90,180],[120,178],
      [160,176],[200,174],[240,172];*/
    let draw = (d,ctx)=gt; {
      if(idx gt;= dlength) {
        cancelAnimationFrame(ts);
      }else {
        drawline(d[idx][0], d[idx][1],ctx);
        idx++;
        requestAnimationFrame(()=gt; {
          draw(d, ctx);
        });
      }
    }



    因为我是直接在页面上显示擦除动画,不需要用户自己去擦,所以擦除区域的坐标都是我自己计算的。然后利用requestAnimationFrame来实现动画,开始用的是setInterval,发现到后面setInterval总是会乱掉,所以建议不要使用setInterval。
    在实现这个效果的过程中发现,利用canvas在页面上drawImage时,图片变的很模糊?
    原来是因为在浏览器的window变量中有一个devicePixelRatio属性,该属性决定了浏览器会用几个(通常是2个)像素点来渲染一个像素。即假设devicePixelRatio的值为2,一张100*100像素大小的图片,在retina屏幕下,会用2个像素点的宽度去渲染图片的1个像素点,因此该图片在retina屏幕上实际会占据200*200像素的空间,相当于图片被放大了一倍,因此图片变的模糊。
    这样关于canvas的问题就容易解决了。我们可以将canvas 当成是一张图片,当浏览器去渲染canvas的时候,他会用2个像素点的宽度去渲染canvas,因此在大多数retina设备的浏览器中会出现绘制的图片或文字模糊的情况。
    类似的,在canvascontext中也存在一个 webkitBackingStorePixelRatio属性(仅safari 和chrome),该属性的值决定了浏览器在渲染canvas之前会用几个像素来存储画布信息。在ios6下的safari中的值是2,因此,如果将一张100*100的图片绘制在 safari中,该图片首先会在内存中生成一张200*200的图片,然后浏览器渲染的时候,会按100x100的图片来渲染,因此就变成了200x200,正好和内存中的图片大小一致,因此在iOS的safari中不会出现失真的问题。但是在chrome和iOS7的safari中却出现了失真,其原因是,chrome和iOS7中的safari的webkitBackingStorePixelRatio值都是1。
    解决办法:



    canvaswidth = canvasBoxclientWidth * 2;
    canvasheight = canvasBoxclientHeight * 2;
    canvasstylewidth = canvasclientWidth + 'px';
    canvasstyleheight = canvasclientHeight * 'px';
    w = canvaswidth*(imgheight/imgwidth);
      // consolelog(w);
      ctxdrawImage(img, 0, 0, canvaswidth , w);


    即可以创建一个两倍于实际大小的canvas,然后用css样式把canvas限定在实际的大小。或者用github上的这个polyfill, 但是我试过了好像不太好用。
    您需要登录后才可以回帖 登录 | 立即注册

    关闭

    蚂蚁站长论坛推荐上一条 /1 下一条

    QQ|Archiver|手机版|广告服务|蚂蚁站长-站长之家 ( 黔ICP备16008478号-1  

    GMT+8, 2017-10-19 07:43

    Powered by 站长论坛

    © 2007-2013 Jzant.com Inc.

    回顶部