html5 图片粒子效果,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代码:
浏览器不支持canvas
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.οnlοad=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
curr_pixel=pixels[i];
ctx.fillStyle=curr_pixel.fillStyle;
ctx.fillRect(curr_pixel.x,curr_pixel.y,1,1);
}
}
上面如果不理解, 对照代码运行一下试试理解吧:
可惜本人数学不好,算法不会。不能为粒子加上炫酷的动态效果~~其实可以找一些算法让粒子动起来的,有兴趣可以做做看~
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
html5 图片粒子效果,Canvas + JavaScript 制作图片粒子效果相关推荐
- html5 打字机效果,使用JavaScript制作打字机文本效果
我们在看电影时经常能够看到一些炫酷的打字机效果,用于显示一些地名或剧情简介.我们在网页中也能够实现类似的效果,目前网上已经有很多打字机效果的插件,如轻量级响应式jQuery打字机特效插件和逼真的js打 ...
- 怎么使用javascript制作图片切换
** 怎么使用javascript制作图片切换 ** 轮播图在网页中是一个不可少的存在,其实只做起来还是相对而言还是比较简单的,来看看是怎么制作的. 这里是css的代码: #imgInfo,.clic ...
- HTML+CSS+JavaScript制作3D云效果,叼炸天!可用鼠标控制方向!
HTML+CSS+JavaScript制作3D云效果,叼炸天!可用鼠标控制方向! 作品介绍 1.网页作品简介方面 :3D云效果,叼炸天!可用鼠标控制方向! 2.网页作品编辑方面:此作品为学生个人主页网 ...
- ppt怎么把图片做成翻书效果_PPT怎么制作翻书效果?PPT制作翻书效果教程
PPT是我们经常使用的幻灯片制作软件,制作的幻灯片可以进行播放.那么为了使PPT内容更加的丰富.生动,我们可以在制作PPT的时候添加一些动画效果,今天小编要教的大家的是PPT中的翻书动画效果,有兴趣的 ...
- 教你用JavaScript制作图片回廊
案例介绍 欢迎来到我的小院,我是霍大侠,恭喜你今天又要进步一点点了! 我们来用JavaScript编程实战案例,做一个图片回廊.图片展示在页面上,用户可通过按钮手动旋转.通过实战我们将学会事件和Eve ...
- ppt怎么把图片做成翻书效果_ppt如何制作翻书效果 ppt翻书效果怎么制作
相信说起PPT,很多的网友经常都会使用到,无论是工作党还是学生党,经常都会使用到PPT进行会议演示吧,而PPT中有非常多的繁杂的各种制作效果,其中有一个翻书效果,好多网友都表示不知道怎么制作,那么下面 ...
- html5实现无缝滚动的效果,基于JavaScript实现无缝滚动效果
本文实例为大家分享了JavaScript实现无缝滚动效果展示的具体代码,供大家参考,具体内容如下 首先应该区分样式中的绝对定位和相对定位,一般来说,移动的单位为绝对定位,在这个实例中,移动的Ul就是绝 ...
- jar包导出无法显示图片或者音乐_如何制作图片视频短片,配上音乐闪耀朋友圈!...
把图片制作成视频短片,再配上一首好听的音乐,发到朋友圈,不仅可以更具创意的分享自己的生活点滴,更能因您的创意获得一大票的赞哦!看到别人分享自己制作的图片视频短片,是不是心痒痒也想做一个呢?今天就教你使 ...
- css背景图片高斯模糊_CSS3 filter(滤镜) 制作图片高斯模糊无需JS
本帖最后由 fengrui99 于 2019-7-8 11:20 编辑 这是一个寂寞的工作日,因为没有女盆友所以很寂寞,因为很寂寞所以来写教程.希望再看教程的你也是单身!啊,知道你是单身枫瑞贼开心!爽 ...
最新文章
- docker报错:driver failed programming external connectivity on endpoint, iptables:No chain by that name
- CentOS系统启动及内核大破坏模拟实验
- linux主机load average的概念计算过程注意事项
- SorterBot-第1部分
- JAVA类定义,成员类,抽象类及接口类
- 从源码分析RocketMQ系列-消息拉取PullMessageProcessor详解
- 一些简单的二维数学的算法。
- 【CS Round #46 (Div. 1.5) B】Letters Deque
- Zookeeper - zookeeper安装与配置
- eclipse --->svn插件安装
- A very hard mathematic problem HDU - 4282(二分)
- Mugeda:代码分享
- java判断闰年中闰月_农历中闰年闰月的算法
- 组装台式计算机需要哪些硬件,电脑硬件有哪些?组装一台电脑需要哪些配件详解...
- python getopt使用_Python命令行参数解析模块getopt使用实例
- C++ Reference: Standard C++ Library reference: C Library: cstdio: fprintf
- 计算机重启恢复到推荐分辨率,电脑重启后分辨率变低是什么情况?Win10分辨率无法调整怎么办?...
- 一文带你看懂!TensorFlow入门
- 绿色版本 VS2019的MSDN
- linux常见命令之wc命令用法。
热门文章
- echart地图加载中国地图,可切换省市地图
- 蓝桥 卷“兔”来袭编程竞赛专场-05棋盘加密 题解
- 开发微信小程序的作用
- 2022年的5G行业:“5G+”很火,5G网络迟迟未能普及
- 自建网盘利用OneDrive,oneindex网盘
- goback history 传递参数_goback 返回上一页触发刷新 / 回调传参
- 为什么Flutter是跨平台开发的终极之选,android完整项目源码
- MPI实现求解10的八次方内素数的个数(版本一)
- docker下载安装和常用命令
- c++逆天改命进阶--多态