Canvas + JavaScript 制作图片粒子效果

2024-09-30 01:02:17

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

左侧图片为源图，右侧图片为粒子效果图。该效果是在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>

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

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

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

HTML5+Canvas调用手机拍照功能实现图片上传（下）

上一篇只讲到前台操作,这篇专门涉及到Java后台处理,前台通过Ajax提交将Base64编码过的图片数据信息传到Java后台,然后Java这边进行接收处理,通过对图片数据信息进行Base64解码,之后使用流将图片数据信息上传至服务器进行保存,并且将图片的路径地址存进数据库. 大家可以点此链接查看前台本地压缩上传的处理: HTML5+Canvas+jQuery调用手机拍照功能实现图片上传(上) ok,废话不多说了,直接贴代码吧. 1.前台js代码: $.ajax({ async:false,//是
javascript结合canvas实现图片旋转效果

我们在微博上可以对图片进行向左转向右转等旋转操作,让用户可以从不同的视角欣赏图片效果.本文将结合实例为您讲解如何使用Javascript结合相关技术来实现图片的旋转效果.我们使用HTML5的canvas标签可对图片进行旋转操作,对于ie6,7,8不支持HTML5的浏览器,我们使用IE特有的滤镜效果来实现图片旋转. HTML 我们在页面中放置一张图片,在图片的上方放置两个按钮,通过onclick事件调用rotate()函数来控制图片向左向右旋转. <div id="tool">
用canvas 实现个图片三角化（LOW POLY）效果

之前无意中看到Ovilia 用threejs做了个LOW POLY,也就是图片平面三角化的效果,觉得很惊艳,然后就自己花了点时间尝试了一下. 我是没怎么用过threejs,所以就直接用canvas的2d绘图API来做,因为感觉似乎这效果也用不上threejs. 直接上demo先:http://whxaxes.github.io/canvas-test/src/Funny-demo/lowpoly/index.html(也可以在移动端看,不过因为计算量比较大,移动设备计算起来会比PC要多花些时间.
JavaScript+html5 canvas实现图片破碎重组动画特效

也许你见过HTML5图片破碎动画特效,实现的原理也挺简单的.但是你应该没有见过视频也可以破碎重组,这个HTML5动画就是利用Canvas的相关特性,实现了点击鼠标让视频破碎重组的效果.在视频区域点击鼠标,即可让该区域的视频破碎,让后经过一段时间后,破碎的区域又可以重组还原,视觉效果非常棒. HTML代码 <div style="display:none"> <video id="sourcevid" autoplay="true"
Javascript保存网页为图片借助于html2canvas库实现

第一步,把网页保存为Canvas画布,借助于html2canvas库,http://html2canvas.hertzen.com/ html2canvas(document.getElementById("id1"), { onrendered: function(canvas) { document.getElementById("id2").appendChild(canvas);//生成画布后如何处理,当然可以在新标签打开,在浮层展示等等 }, canvas
HTML5 canvas 9绘制图片实例详解

绘制图片 Var image=new Image(); image.src=" http://img4.duitang.com/uploads/item/201406/25/20140625182321_4MTau.thumb.700_0.jpeg"; image.onload=function(){} Context.drawImage(image,x,y); Context.drawImage(image,x,y,w,h); Context.drawIamge(image,sx,s
一步步教你利用Canvas对图片进行处理

前言 Canvas,中文译为"画布",HTML5中新增了<canvas>元素,可以结合JavaScript动态地在画布中绘制图形. 今天,我们不讲Canvas的图形绘制,而是讲如何对图片进行处理,话不多说了,来一起看看详细的介绍吧. 大概流程非常简单,主要分为以下三个步骤: Canvas图片处理是的,就像把大象装进冰箱一样简单,哈哈. 一.主要API 整个流程中所用到的主要Canvas API有: 绘制图像: drawImage() 获取图像数据: getImageDat
canvas实现图片根据滑块放大缩小效果

效果图: 图(1) 原始图图(2) 缩小后图(3) 放大后代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #canvas1{ box-shadow: 3px 3px 10px black; } </style> &
HTML5+Canvas调用手机拍照功能实现图片上传（上）

因为最近一段时间,一直在弄微信项目,其中涉及到了证件上传的功能,刚开始的时候一点头绪都没有,上网查了很多资料,QQ群里面也问了不少人,很多人说如果是app程序,可以申请系统权限,然后再去调用系统底层的东西,但是微信是在浏览器里面操作的,我们自定义的页面也是通过微信内置浏览器打开的,而且微信浏览器在内部进行了很多特殊处理,屏蔽了很多东西,所以要在页面调用拍照功能或者是打开手机系统的图库目录是不可能的,当然,这些都只是大伙儿理论上的猜测而已,而在我查了两天的资料之后,发现这个问题原来是可以解决的,而
canvas压缩图片转换成base64格式输出文件流

昨天研究了一下canvas压缩图片的方法,上传上来给大家分享一下  <canvas id="canvas"></canvas>  <img src="" class="preview"> <img src="" class="preview"> <!--原图压缩--&

Canvas + JavaScript 制作图片粒子效果

相关推荐

随机推荐