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 相关文章推荐
jQuery入门问答 整理的几个常见的初学者问题
Feb 22 Javascript
JavaScript伸缩的菜单简单示例
Dec 03 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
Oct 17 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
Mar 13 Javascript
原生javascript实现的一个简单动画效果
Mar 30 Javascript
JS动态给对象添加属性和值的实现方法
Oct 21 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
Mar 04 Javascript
echarts学习笔记之箱线图的分析与绘制详解
Nov 22 Javascript
JS实现关键词高亮显示正则匹配
Jun 22 Javascript
vue.js实现左边导航切换右边内容
Oct 21 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
Nov 12 Javascript
vue-router定义元信息meta操作
Dec 07 Vue.js
微信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获取一个字符串中间一部分字符的方法
2014/08/19 PHP
PHP中ini_set与ini_get用法实例
2014/11/04 PHP
CodeIgniter多语言实现方法详解
2016/01/20 PHP
PHP编程入门的基本语法知识点总结
2016/01/26 PHP
mysql alter table命令修改表结构实例详解
2016/09/24 PHP
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
2007/01/11 Javascript
Javascript实现检测客户端类型代码封包
2015/12/03 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
2015/12/08 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
2017/07/14 Javascript
jquery.uploadView 实现图片预览上传功能
2017/08/10 jQuery
原生JS实现网页手机音乐播放器 歌词同步播放的示例
2018/02/02 Javascript
JS中用EL表达式获取上下文参数值的方法
2018/03/28 Javascript
浅谈Webpack核心模块tapable解析
2018/09/11 Javascript
vue-cli V3.0版本的使用详解
2018/10/24 Javascript
vue实现鼠标经过动画
2019/10/16 Javascript
JS如何监听div的resize事件详解
2020/12/03 Javascript
[43:48]Ti4正赛第一天 VG vs NEWBEE 2
2014/07/19 DOTA
Python基于PycURL自动处理cookie的方法
2015/07/25 Python
纯python实现机器学习之kNN算法示例
2018/03/01 Python
Django开发中复选框用法示例
2018/03/20 Python
Python实现的本地文件搜索功能示例【测试可用】
2018/05/30 Python
Python3 解决读取中文文件txt编码的问题
2019/12/20 Python
appium+python adb常用命令分享
2020/03/06 Python
Django import export实现数据库导入导出方式
2020/04/03 Python
使用Python实现将多表分批次从数据库导出到Excel
2020/05/15 Python
利用Pycharm + Django搭建一个简单Python Web项目的步骤
2020/10/22 Python
详解Pytorch显存动态分配规律探索
2020/11/17 Python
请问如下代码执行后a和b的值分别是什么
2016/05/05 面试题
出口公司经理求职简历中的自我评价
2013/10/13 职场文书
注塑工厂厂长岗位职责
2013/12/02 职场文书
厨师长岗位职责
2014/03/02 职场文书
租房协议书范文
2014/08/20 职场文书
护士求职简历自我评价
2015/03/10 职场文书
故意杀人罪辩护词
2015/05/21 职场文书
MySQL sql_mode修改不生效的原因及解决
2021/05/07 MySQL
深入浅析python3 依赖倒置原则(示例代码)
2021/07/09 Python