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 相关文章推荐
javascript 有趣而诡异的数组
Apr 06 Javascript
Jquery 基础学习笔记之文档处理
May 29 Javascript
JavaScript 设计模式 安全沙箱模式
Sep 24 Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
Dec 23 Javascript
JavaScript移除数组内重复元素的方法
Mar 18 Javascript
基于jQuery实现的扇形定时器附源码下载
Oct 20 Javascript
JavaScript中最常用的10种代码简写技巧总结
Jun 28 Javascript
在vue项目中使用sass的配置方法
Mar 20 Javascript
详解JavaScript中的数组合并方法和对象合并方法
May 11 Javascript
vue二级菜单导航点击选中事件的方法
Sep 12 Javascript
JS将时间秒转换成天小时分钟秒的字符串
Jul 10 Javascript
Vue文本模糊匹配功能如何实现
Jul 30 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实现定时生成HTML网站首页实例代码
2008/11/20 PHP
深入mysql_fetch_row()与mysql_fetch_array()的区别详解
2013/06/05 PHP
PHP实现的汉字拼音转换和公历农历转换类及使用示例
2014/07/01 PHP
PHP生成压缩文件实例
2015/02/07 PHP
ThinkPHP里用U方法调用js文件实例
2015/06/18 PHP
php常量详细解析
2015/10/27 PHP
Yii2超好用的日期和时间组件(值得收藏)
2016/05/05 PHP
PHP检测链接是否存在的代码实例分享
2016/05/06 PHP
php获取微信基础接口凭证Access_token
2018/08/23 PHP
javascript的事件描述
2006/09/08 Javascript
jquery 简单的进度条实现代码
2010/03/11 Javascript
在jQuery ajax中按钮button和submit的区别分析
2012/10/07 Javascript
JavaScript学习笔记之Function对象
2015/01/22 Javascript
浅谈angularJS 作用域
2015/07/05 Javascript
深入理解Java线程编程中的阻塞队列容器
2015/12/07 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
2016/05/27 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
2016/07/08 Javascript
微信小程序加载更多 点击查看更多
2016/11/29 Javascript
使用Vue.observable()进行状态管理的实例代码详解
2019/05/26 Javascript
vue实现路由不变的情况下,刷新页面操作示例
2020/02/02 Javascript
JavaScript实现Tab选项卡切换
2020/02/13 Javascript
浅谈js数组splice删除某个元素爬坑
2020/10/14 Javascript
jquery实现广告上下滚动效果
2021/03/04 jQuery
[02:58]献给西雅图的情书_高清
2014/05/29 DOTA
Python中基础的socket编程实战攻略
2016/06/01 Python
python3.7.0的安装步骤
2018/08/27 Python
Python 判断图像是否读取成功的方法
2019/01/26 Python
基于Python的PIL库学习详解
2019/05/10 Python
css3通过scale()、rotate()实现放大、旋转
2020/03/19 HTML / CSS
KEETSA环保床垫:更好的睡眠,更好的生活!
2016/11/24 全球购物
给校长的建议书400字
2014/05/15 职场文书
2015年安全生产工作总结范文
2015/04/02 职场文书
晶体管来复再生式二管收音机
2021/04/22 无线电
mysql如何能有效防止删库跑路
2021/10/05 MySQL
CentOS安装Nginx并部署vue
2022/04/12 Servers
pnpm对npm及yarn降维打击详解
2022/08/05 Javascript