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 isArray()函数判断对象类型的种种方法
Oct 11 Javascript
基于jQuery的自动完成插件
Feb 03 Javascript
jquery中push()的用法(数组添加元素)
Nov 25 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
Mar 26 Javascript
js实现键盘Enter键提交表单的方法
May 27 Javascript
浅谈Javascript中substr和substring的区别
Sep 30 Javascript
通过点击jqgrid表格弹出需要的表格数据
Dec 02 Javascript
Javascript实现图片懒加载插件的方法
Oct 20 Javascript
浅谈微信JS-SDK 微信分享接口开发(介绍版)
Aug 15 Javascript
element-ui 关于获取select 的label值方法
Aug 24 Javascript
原生JS实现逼真的图片3D旋转效果详解
Feb 16 Javascript
javascript中this的用法实践分析
Jul 29 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 图片上传实现代码 带详细注释
2010/04/29 PHP
PHP XML error parsing SOAP payload on line 1
2010/06/17 PHP
解析WordPress中控制用户登陆和判断用户登陆的PHP函数
2016/03/01 PHP
php无限极分类实现方法分析
2019/07/04 PHP
跟我一起学写jQuery插件开发方法(附完整实例及下载)
2010/04/01 Javascript
JS获取页面窗口大小的代码解读
2011/12/01 Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
2011/12/11 Javascript
基于jQuery的简单九宫格实现代码
2012/08/09 Javascript
js快速排序的实现代码
2013/12/08 Javascript
jQuery实现连续动画效果实例分析
2015/10/09 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
2016/05/17 Javascript
深入理解nodejs中Express的中间件
2017/05/19 NodeJs
express如何使用session与cookie的方法
2018/01/30 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
2018/08/05 Javascript
vue项目中使用tinymce编辑器的步骤详解
2018/09/11 Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
2018/09/14 Javascript
小程序实现授权登陆的解决方案
2018/12/02 Javascript
使vue实现jQuery调用的两种方法
2019/05/12 jQuery
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
2019/11/04 Javascript
教大家使用Python SqlAlchemy
2016/02/12 Python
Python3实现发送QQ邮件功能(附件)
2020/12/23 Python
Python 函数基础知识汇总
2018/03/09 Python
Python爬虫抓取代理IP并检验可用性的实例
2018/05/07 Python
python3模拟实现xshell远程执行liunx命令的方法
2019/07/12 Python
django 微信网页授权认证api的步骤详解
2019/07/30 Python
python简单实现9宫格图片实例
2020/09/03 Python
css3实例教程 一款纯css3实现的发光屏幕旋转特效
2014/12/07 HTML / CSS
html5+CSS3+JS实现七夕言情功能代码
2017/08/28 HTML / CSS
基于HTML5 的人脸识别活体认证的实现方法
2016/06/22 HTML / CSS
凯普林包包西班牙官网:Kipling西班牙
2019/04/12 全球购物
巴西Bo.Bô官方在线商店:经营奢侈品时尚业务
2020/03/16 全球购物
《记金华的双龙洞》教学反思
2014/04/19 职场文书
2019旅游导游工作总结
2019/06/27 职场文书
《暗黑破坏神2:重制版》本周进行第一轮A测 目前可官网进行申请报名
2021/04/07 其他游戏
关于python爬虫应用urllib库作用分析
2021/09/04 Python
java executor包参数处理功能 
2022/02/15 Java/Android