js canvas实现擦除动画


Posted in Javascript onJuly 16, 2016

本文实例为大家分享了canvas擦除动画的实现原理、实现代码、以及在实现过程中遇到的问题,供大家参考,具体内容如下

原理总结为就是在移动设备上将某张图片擦掉显示另一张图片,利用canvas来实现。
如果是用户手动擦除,则需要监听touchmove,touchend等事件,并计算相应的坐标,利用canvas的clearRect或rect 画弧线或画线来实现。但是这会造成在androd手机上存在卡顿的现象。
canvas有个globalCompositeOperation属性,这个属性的默认值是source-over,即当你在已有像素上进行绘图时会叠加。但是还有一个属性是destination-out,即在源图像外显示自己的目标图像,也就是在已有像素基础上绘图时,你绘制的区域里已有像素会被置为透明,有了这个属性后就意味着不需要用到clip等系列函数,直接用粗线条或者弧线就可以了,这样一来就减少绘图环境api的调用,性能会得到提升,在android上运行也会流畅很多。

下面来展示下我的擦除代码

let requestAnimationFrame = 
  window.requestAnimationFrame || 
  window.mozRequestAnimationFrame ||
  window.webkitRequestAnimationFrame ||   window.msRequestAnimationFrame;
let cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;
let a = 60;

let canvasCleaner = document.getElementById('cas-1');
let ctxCleaner = canvasCleaner.getContext('2d');
let canvasCleanerBox = document.querySelector('.slide-4');
let imgCleaner = new Image();
canvasCleaner.width = canvasCleanerBox.clientWidth * 2;
canvasCleaner.height = canvasCleanerBox.clientHeight * 2;
canvasCleaner.style.width = canvasCleanerBox.clientWidth + 'px';
canvasCleaner.style.height = canvasCleanerBox.clientHeight + 'px';
imgCleaner.src = 'https://gw.alicdn.com/tps/TB1XbyCKVXXXXXEXpXXXXXXXXXX-1080-1920.jpg';
imgCleaner.onload = ()=> {
    let width = parseInt(canvasCleaner.style.width);
    w = canvasCleaner.width*(imgCleaner.height/imgCleaner.width);
    ctxCleaner.drawImage(imgCleaner, 0, 0, canvasCleaner.width, w );

  ctxCleaner.lineCap = 'round';//lineCap 属性设置或返回线条末端线帽的样式。
  ctxCleaner.lineJoin = 'round';
  ctxCleaner.lineWidth = 100;//设置或返回当前线条的宽度
  ctxCleaner.globalCompositeOperation = 'destination-out';
}

let drawline = (x1, y1,ctx)=> {
  ctx.save();
  ctx.beginPath();
  ctx.arc(x1,y1, a, 0, 2 * Math.PI);
  ctx.fill();//fill() 方法填充当前的图像(路径)。默认颜色是黑色。
  ctx.restore();
};
/* 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)=> {
  if(idx >= d.length) {
    cancelAnimationFrame(ts);
  }else {
    drawline(d[idx][0], d[idx][1],ctx);
    idx++;
    requestAnimationFrame(()=> {
      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设备的浏览器中会出现绘制的图片或文字模糊的情况。
类似的,在canvas  context中也存在一个 webkitBackingStorePixelRatio属性(仅safari 和chrome),该属性的值决定了浏览器在渲染canvas之前会用几个像素来存储画布信息。在ios6下的safari中的值是2,因此,如果将一张100*100的图片绘制在 safari中,该图片首先会在内存中生成一张200*200的图片,然后浏览器渲染的时候,会按100x100的图片来渲染,因此就变成了200x200,正好和内存中的图片大小一致,因此在iOS的safari中不会出现失真的问题。但是在chrome和iOS7的safari中却出现了失真,其原因是,chrome和iOS7中的safari的webkitBackingStorePixelRatio值都是1。
解决办法:

canvas.width = canvasBox.clientWidth * 2;
canvas.height = canvasBox.clientHeight * 2;
canvas.style.width = canvas.clientWidth + 'px';
canvas.style.height = canvas.clientHeight * 'px';
w = canvas.width*(img.height/img.width);
  // console.log(w);
  ctx.drawImage(img, 0, 0, canvas.width , w);

即可以创建一个两倍于实际大小的canvas,然后用css样式把canvas限定在实际的大小。或者用github上的这个polyfill, 但是我试过了好像不太好用。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
AeroWindow 基于JQuery的弹出窗口插件
Jun 27 Javascript
深入理解JavaScript 闭包究竟是什么
Apr 12 Javascript
JavaScript将页面表格导出为Excel的具体实现
Dec 27 Javascript
使用jQuery的attr方法来修改onclick值
Jul 07 Javascript
jquery日历插件datepicker用法分析
Jan 22 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
May 17 Javascript
详解js中call与apply关键字的作用
Nov 21 Javascript
利用Console来Debug的10个高级技巧汇总
Mar 26 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
Mar 27 Javascript
详解小程序如何动态绑定点击的执行方法
Nov 26 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
Nov 06 Javascript
微信jssdk用法汇总
Jul 16 #Javascript
详解JavaScript节流函数中的Throttle
Jul 16 #Javascript
很棒的js选项卡切换效果
Jul 15 #Javascript
轻松5句话解决JavaScript的作用域
Jul 15 #Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
Jul 15 #Javascript
IE下JS保存图片的简单实例
Jul 15 #Javascript
jQuery 3.0中存在问题及解决办法
Jul 15 #Javascript
You might like
PHP生成UTF8文件的方法
2010/05/15 PHP
PHP中call_user_func_array()函数的用法演示
2012/02/05 PHP
关于php支持分块与断点续传文件下载功能代码
2014/05/09 PHP
如何使用PHP对网站验证码进行破解
2015/09/17 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
php数组和链表的区别总结
2019/09/20 PHP
对google个性主页的拖拽效果的js的完整注释[转]
2007/04/10 Javascript
javascript实现的元素拖动函数宿主为浏览器
2014/07/21 Javascript
JavaScript实现的一个日期格式化函数分享
2014/12/06 Javascript
JavaScript中使用Object.create()创建对象介绍
2014/12/30 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
2015/12/19 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
2016/10/04 Javascript
JS中实现函数return多个返回值的实例
2017/02/21 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
2017/03/21 jQuery
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
2017/04/01 Javascript
脚手架vue-cli工程webpack的作用和特点
2018/09/29 Javascript
koa大型web项目中使用路由装饰器的方法示例
2019/04/02 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
2019/08/16 Javascript
微信小程序点击顶部导航栏切换样式代码实例
2019/11/12 Javascript
Python中如何获取类属性的列表
2016/12/26 Python
Python Socket编程详细介绍
2017/03/23 Python
PyChar学习教程之自定义文件与代码模板详解
2017/07/17 Python
python 循环读取txt文档 并转换成csv的方法
2018/10/26 Python
用python3读取python2的pickle数据方式
2019/12/25 Python
python SOCKET编程基础入门
2021/02/27 Python
马来西亚最大的电器网站:Senheng
2017/10/13 全球购物
大学生就业推荐信范文
2013/11/29 职场文书
保护母亲河倡议书
2014/04/14 职场文书
大学专科自荐信
2014/06/17 职场文书
九一八事变演讲稿
2014/09/05 职场文书
授权委托书协议书
2014/10/16 职场文书
2014年保卫工作总结
2014/12/05 职场文书
导游词之无锡唐城
2019/12/12 职场文书
解决hive中导入text文件遇到的坑
2021/04/07 Python
使用redis实现延迟通知功能(Redis过期键通知)
2021/09/04 Redis
Golang数据类型和相互转换
2022/04/12 Golang