Canvas + JavaScript 制作图片粒子效果


Posted in Javascript onFebruary 08, 2017

首先看一下源图和转换成粒子效果的对比图:

Canvas + JavaScript 制作图片粒子效果Canvas + JavaScript 制作图片粒子效果

左侧图片为源图,右侧图片为粒子效果图。该效果是在Canvas画布上制作的。将图片制作成粒子效果相对而言是比较简单的。重点了解两个知识点即可

1:图片是通过image对象形式绘制在画布上的,然后使用Canvas的getImageData接口,获取图像的像素信息。

var imageData=ctx.getImageData(x, y, width, height);

参数说明:x,y为画布上的x和y坐标

               width,height为获取指定区域图像的信息

返回值说明:imageData为返回值,它是一个对象,包含三个属性

imageData={
 data:Unit8ClampedArray[10000] //一个包含图片区域内每个像素点的RGBA的整型数据信息
 height:200 //读取的图片像素信息区域高度
 width:200 //读取的图片像素信息区域宽度
}

2:了解像素区域数据的排布说明,以上获取的图片数据像素信息(imageData对象中的data属性)为RGBA整型的一维数组数据。一个像素是有4个值(R,G,B,A)组成的。也就是说,数组信息每四个为一个像素点。因此,有以下规则,

第一个像素信息为:RGBA(data[0],data[1],data[2],data[3])

第二个像素信息为:RGBA(data[4],data[5],data[6],data[7])

  .....

第N个像素信息为: RGBA(data[(n-1)*4],data[(n-1)*4+1],data[(n-1)*4+2],data[(n-1)*4+3])

  .....

另外,像素区域既然是一个区域,它是有宽和高的。上面的推算公式适合单独一行使用定位一个像素点。所以计算像素点时要考虑到在整个图像区域内定位:

以上图为例。图像的宽和高都为200,如果按照每一个像素为一行一列时。则该图像共有200行,200列。所以要取得 i 行第 j 列的像素初始位置信息为:

var pos =[( i-1 )*200]+( j-1 )]*4;

其中,公式中的 i 表示行数,j 表示列数。200为图像的宽度。

demo代码:

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
</head>
<body>
<canvas id="myCanvas" width="600" height="400" style="background:#000">浏览器不支持canvas</canvas>
</body>
<script type="text/javascript">
 var canvas=document.getElementById("myCanvas");
 var ctx=canvas.getContext("2d");
 var image = new Image();
image.src='/WebWorkspace/EchartDemo/images/star.png';
 var pixels=[]; //存储像素数据
 var imageData;
 image.onload=function(){
 ctx.drawImage(image,200,100,200,200);
 imageData=ctx.getImageData(200,100,200,200); //获取图表像素信息
 getPixels(); //获取所有像素
 drawPic(); //绘制图像
 };
 function getPixels(){
 var pos=0;
 var data=imageData.data; //RGBA的一维数组数据
 //源图像的高度和宽度为200px
 for(var i=1;i<=200;i++){
  for(var j=1;j<=200;j++){
  pos=[(i-1)*200+(j-1)]*4; //取得像素位置
  if(data[pos]>=0){
   var pixel={
   x:200+j+Math.random()*20, //重新设置每个像素的位置信息
   y:100+i+Math.random()*20, //重新设置每个像素的位置信息
   fillStyle:'rgba('+data[pos]+','+(data[pos+1])+','+(data[pos+2])+','+(data[pos+3])+')'
   }
   pixels.push(pixel);
  }
  }
 }
 }
 function drawPic(){
 var canvas=document.getElementById("myCanvas");
 var ctx=canvas.getContext("2d");
 ctx.clearRect(0,0,600,400);
 var len=pixels.length,curr_pixel=null;
 for(var i=0;i<len;i++){
  curr_pixel=pixels[i];
  ctx.fillStyle=curr_pixel.fillStyle;
  ctx.fillRect(curr_pixel.x,curr_pixel.y,1,1);
 }
 }
</script>
</html>

上面如果不理解, 对照代码运行一下试试理解吧:

可惜本人数学不好,算法不会。不能为粒子加上炫酷的动态效果~~其实可以找一些算法让粒子动起来的,有兴趣可以做做看~

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
使用jQuery的ajax功能实现的RSS Reader 代码
Sep 03 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
Dec 23 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
Aug 22 Javascript
jQuery中:button选择器用法实例
Jan 04 Javascript
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
angular6.x中ngTemplateOutlet指令的使用示例
Aug 09 Javascript
element ui 表格动态列显示空白bug 修复方法
Sep 04 Javascript
JS执行控制之节流模式实例分析
Dec 21 Javascript
小程序实现人脸识别功能(百度ai)
Dec 23 Javascript
小程序转发探索示例
Feb 19 Javascript
小程序中英文混合排序问题解决
Aug 02 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
Sep 11 Javascript
jQuery实现标签页效果实战(4)
Feb 08 #Javascript
Angular.JS实现无限级的联动菜单(使用demo)
Feb 08 #Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
Feb 08 #Javascript
jQuery实现级联下拉框实战(5)
Feb 08 #Javascript
webpack入门+react环境配置
Feb 08 #Javascript
JavaScript实现鼠标点击导航栏变色特效
Feb 08 #Javascript
jQuery实现优雅的弹窗效果(6)
Feb 08 #Javascript
You might like
用js进行url编码后用php反解以及用php实现js的escape功能函数总结
2010/02/08 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
PHP 加密 Password Hashing API基础知识点
2020/03/02 PHP
学习面向对象之面向对象的基本概念:对象和其他基本要素
2010/11/30 Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
2013/01/25 Javascript
document.getElementById获取控件对象为空的解决方法
2013/11/20 Javascript
JavaScript打印网页指定区域的例子
2014/05/03 Javascript
判断日期是否能跨月查询的js代码
2014/07/25 Javascript
JS获取各种宽度、高度的简单介绍
2014/12/19 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
2016/02/03 Javascript
js实现多图左右切换功能
2016/08/04 Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
2016/08/05 Javascript
深入理解Angularjs中$http.post与$.post
2017/05/19 Javascript
Node.js引入UIBootstrap的方法示例
2018/05/11 Javascript
微信小程序canvas拖拽、截图组件功能
2018/09/04 Javascript
vue+axios 拦截器实现统一token的案例
2020/09/11 Javascript
教大家玩转Python字符串处理的七种技巧
2017/03/31 Python
机器学习python实战之决策树
2017/11/01 Python
python enumerate函数的使用方法总结
2017/11/15 Python
python网络爬虫之如何伪装逃过反爬虫程序的方法
2017/11/23 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
浅谈PyQt5中异步刷新UI和Python多线程总结
2019/12/13 Python
使用pyhon绘图比较两个手机屏幕大小(实例代码)
2020/01/03 Python
Python按照list dict key进行排序过程解析
2020/04/04 Python
详解Python 中的容器 collections
2020/08/17 Python
python 实现aes256加密
2020/11/27 Python
详解使用scrapy进行模拟登陆三种方式
2021/02/21 Python
CSS3教程(8):CSS3透明度指南
2009/04/02 HTML / CSS
Html5应用程序缓存(Cache manifest)
2018/06/04 HTML / CSS
英国翻新电子产品购物网站:Tech Trade
2017/12/25 全球购物
thinkphp5 redis缓存新增方法实例讲解
2021/03/24 PHP
艺术应用与设计个人的自我评价
2013/11/23 职场文书
2015应届毕业生求职信范文
2015/03/20 职场文书
MySQL 存储过程的优缺点分析
2021/05/20 MySQL
vue实现列表拖拽排序的示例代码
2022/04/08 Vue.js