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 相关文章推荐
Maps Javascript
Jan 22 Javascript
JavaScript修改css样式style
Apr 15 Javascript
JavaScript中九种常用排序算法
Sep 02 Javascript
js实现汉字排序的方法
Jul 23 Javascript
简单实现bootstrap导航效果
Feb 07 Javascript
详解Vue中添加过渡效果
Mar 20 Javascript
详解angular element()方法使用
Apr 08 Javascript
react-native封装插件swiper的使用方法
Mar 20 Javascript
微信小程序拼接图片链接无底洞深入探究
Sep 03 Javascript
js实现图片3D轮播效果
Sep 21 Javascript
vue 导航内容设置选中状态样式的例子
Nov 01 Javascript
Vue.js的模板语法详解
Feb 16 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
php读取文件内容的几种方法详解
2013/06/26 PHP
php实现模拟post请求用法实例
2015/07/11 PHP
PHP使用栈解决约瑟夫环问题算法示例
2017/08/27 PHP
PHP实现的CURL非阻塞调用类
2018/07/26 PHP
PHP7 新增功能
2021/03/09 PHP
javascript getElementsByClassName函数
2010/04/01 Javascript
JavaScript获取/更改文本框的值的实例代码
2013/08/02 Javascript
Javascript中匿名函数的多种调用方式总结
2013/12/06 Javascript
JS解析XML实例分析
2015/01/30 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
2015/05/03 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
2015/09/02 Javascript
Angularjs实现mvvm式的选项卡示例代码
2016/09/08 Javascript
Javascript数组中push方法用法分析
2016/10/31 Javascript
js实现简单的二级联动效果
2017/03/09 Javascript
ajax +NodeJS 实现图片上传实例
2017/06/06 NodeJs
Vue+Vux项目实践完整代码
2017/11/30 Javascript
浅谈Vue 数据响应式原理
2018/05/07 Javascript
jQuery实现的页面弹幕效果【测试可用】
2018/08/17 jQuery
vue + typescript + video.js实现 流媒体播放 视频监控功能
2019/07/07 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
2020/08/31 Javascript
[50:59]2018DOTA2亚洲邀请赛 4.7 总决赛 LGD vs Mineski第四场
2018/04/10 DOTA
Python简单网络编程示例【客户端与服务端】
2017/05/26 Python
对Python的zip函数妙用,旋转矩阵详解
2018/12/13 Python
Python高级property属性用法实例分析
2019/11/19 Python
python学习笔记之多进程
2020/08/06 Python
Pandas之缺失数据的实现
2021/01/06 Python
美术教学感言
2014/02/22 职场文书
预备党员2014全国两会学习心得体会
2014/03/10 职场文书
竞选班干部的演讲稿
2014/04/24 职场文书
组织鉴定材料
2014/06/02 职场文书
雷锋式好少年事迹材料
2014/08/17 职场文书
党员自我评议个人对照检查材料
2014/09/16 职场文书
法定代表人身份证明书(含说明)
2014/10/02 职场文书
公司介绍信范文
2015/01/31 职场文书
Spring Boot 排除某个类加载注入IOC的操作
2021/08/02 Java/Android
使用 Koa + TS + ESLlint 搭建node服务器的过程详解
2022/05/30 NodeJs