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>
上面如果不理解, 对照代码运行一下试试理解吧:
可惜本人数学不好,算法不会。不能为粒子加上炫酷的动态效果~~其实可以找一些算法让粒子动起来的,有兴趣可以做做看~
以上,谢谢阅读~
Canvas + JavaScript 制作图片粒子效果的更多相关文章
- WPF设置VistualBrush的Visual属性制作图片放大镜效果
原文:WPF设置VistualBrush的Visual属性制作图片放大镜效果 效果图片:原理:设置VistualBrush的Visual属性,利用它的Viewbox属性进行缩放. XAML代码:// ...
- 如何通过PS制作图片文字效果
如图这是最终效果,下面我为大家介绍如何制作这种图片文字效果 准备一张图: 方法,步骤: 首先我们打开PHOTOSHOP,插入一张图片. 之后按键盘上面的"T"键快捷键启用文字工具, ...
- 原生javascript实现图片放大镜效果
当我们在电商网站上购买商品时,经常会看到这样一种效果,当我们把鼠标放到我们浏览的商品图片上时,会出现类似放大镜一样的一定区域的放大效果,方便消费者观察商品.今天我对这一技术,进行简单实现,实现图片放大 ...
- 《JavaScript 实战》:JavaScript 实现图片切割效果
很久之前就在一个网站的截取相片的功能中看到这个效果,也叫图片裁剪.图片剪切(设置一下也可以做出放大镜等类似的效果).当时觉得很神奇,碍于水平有限,没做出来.前些日子突然想做一个透镜效果,就突然想到了这 ...
- 用JavaScript实现图片剪切效果
学会如何获取鼠标的坐标位置以及监听鼠标的按下.拖动.松开等动作事件,从而实现拖动鼠标来改变图片大小. 还可以学习css中的clip属性. 一.CSS实现图片不透明及裁剪效果. 图片剪切三层结构 1.第 ...
- flash8中利用遮罩制作图片切换效果
http://www.56.com/w73/play_album-aid-8642763_vid-NDY5ODU2Mzg.html
- DeWeb : 制作图片轮换效果
演示:http://www.web0000.com/slide.dw源代码:http://www.web0000.com/media/source/slide.zip一.新建一个DLL二.除第一行外, ...
- 基于HTML5 Canvas粒子效果文字动画特效
之前我们分享过很多超酷的文字特效,其中也有利用HTML5和CSS3的.今天我们要来分享一款基于HTML5 Canvas的文字特效,输入框中输入想要展示的文字,回车后即可在canvas上绘制出粒子效果的 ...
- javascript 实现图片拖动
javascript实现图片拖动效果并不难,主要的思路如下 1:给图片绑定监听鼠标按下对象,设置拖动属性为true 2:鼠标抬起:拖动属性为false 鼠标移动:改变坐标即可,新坐标=图片原始坐标+鼠 ...
随机推荐
- Git GitHub的使用
Git的工作区示意 GIT总结 使用git github也一段时间突然发现还是少了一些总结,那就从这儿开始吧! (1)git的配置,这儿就从单独的安装配置开始 安装:sudo yum install ...
- Redis详解
转自:http://blog.csdn.net/eroswang/article/details/7080412 1. MySql+Memcached架构的问题 1.MySQL需要不断进行拆库拆表, ...
- ucos移植指南
指定堆栈数据类型(宽度) typedef unsigned int OS_STK; 指定Ucos移植方法3中保存cpu状态寄存器的变量的宽度 typedef unsigned int OS_CPU_S ...
- X-004 FriendlyARM tiny4412 uboot移植之点亮指路灯
<<<<<<<<<<<<<<<<<<<<<<<<< ...
- 【转】分享一份C语言写的简历
个人观点:文章想法很棒,作者的编码风格也很赞,可以从中学到不少东西.转载的文章是我都用心看过的,而且希望后续再可以回过头看的文章,努力让自己的能力越来越强,加油 这里黑客新闻吗?作者用代码更新了自己的 ...
- 【转】gvim配置及相关插件安装
0.准备软件及插件.(a)gvim72.exe 地址ftp://ftp.vim.org/pub/vim/pc/gvim72.exe.(b)vimcdoc-1.7.0-setup.exe 地址http: ...
- C#中的逆变和协变
msdn 解释如下: “协变”是指能够使用与原始指定的派生类型相比,派生程度更大的类型. “逆变”则是指能够使用派生程度更小的类型. 解释的很正确,大致就是这样,不过不够直白. 直白的理解: “协变” ...
- 绕过网站安全狗拦截,上传Webshell技巧总结(附免杀PHP一句话)
这篇文章我介绍一下我所知道的绕过网站安全狗上传WebShell的方法. 思路是:修改HTTP请求,构成畸形HTTP请求,然后绕过网站安全狗的检测. 废话不多说,切入正题.... 1.实验环境: Win ...
- OC 优化目录
把 main. info 和 appdelegate 放到自己的新建目录 1.去掉info.plist的警告 在build phases->copy Bundle Resources中去掉inf ...
- php循环生成的表单如何获得其各项值案例
思路:输入框和按钮是用for循环生成的,不但要获取输入框里的各项值,并且要获取点击按钮的值,要知道是那个按钮被点击了,这里以生成5个为例.如图: 这是提交页面,点击的是“小米”. 这是显示结果,测试显 ...