canvas简单实现图片的粒子动画

试想一下,一张图片怎样取得每个像素点,在每个像素点上绘制一个粒子(圆)呢?或者说记录上每个像素点的位置?-----canvas提供了一种方法getImageData,我们来假设一个场景,首先是一张800X600的canvas画布,这张画布默认是白色的背景图,然后有一张600X400的png图片;那么首先的代码就应该是:

var canvas=document.getElementById("myCanvas");//获取canvas画布var ctx=canvas.getContext("2d");//声明这个画布是2d
ctx.clearRect(0,0,canvas.width,canvas.height);//绘制之前先清空画布
var image = new Image();
image.src='201702081110069.png';//创建一张图片,并声明路径

现在的图片已经放上去了,但是还没有加载出来,更没有绘制到画布上,所以接下来就是要先让图片加载完成,然后绘制到画布上:

var imgData = null;image.onload = function(){//在图片加载完成后ctx.drawImage(image,0,0,400,400);//将图片绘制到画布上imgData=ctx.getImageData(0,0,400,400); //获取图表像素信息}

关键代码来了,getImageData里面就存储了我们需要的信息,那么我们就遍历这张图片的宽(600)和高(400),我们就能拿到整张图片的每个像素点,那么,透明部分我们就过滤掉!

            var pos=0;var data=imgData.data;    //RGBA的一维数组数据var nowNum=0;for(var i=1;i<=imgData.height;i++){for(var j=1;j<=imgData.width;j++){//遍历宽高pos=(i-1)*imgData.width+(j-1); //取得像素位置if(data[pos*4]>0){//开始过滤var onePix= new Yuan(100,j,i);//创建一个圆,并把现在的宽高像素传递过去copyPixels.push(onePix);//把创建好的圆放进一个数组里面}}}//下面是圆的构造函数function Yuan(distance,j=rd(50,400),i=rd(50,400)){this.x = j; //当前J就是X轴的坐标, --->绘制时的实时位置this.y = i;//当前的i就是Y轴的坐标this.targetX = 0;//将要去的粒子位置this.targetY = 0;this.color = '#bbb';//定义粒子的颜色(其实在上面的遍历是可以拿到本身的颜色的,偷懒)}

当然,这只是阐述了方法,授人以鱼不如授人以渔.但是,相信很多同僚都是过来直接找代码赋值粘贴的,所以还是不多说了,上代码吧,有三张 png的透明背景图(非透明图生成的粒子会很多影响性能)和swiper插件,替换一下即可.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>粒子动画</title><link rel="stylesheet" href="css/swiper.min.css"><link rel="stylesheet" href="css/demo.css"><script src="js/jquery-3.1.0.min.js"></script><script src="js/swiper.jquery.min.js"></script>
</head>
<body>
<canvas id="myCanvas" width="1200" height="600">浏览器不支持canvas</canvas>
<div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide">Slide 1</div><div class="swiper-slide">Slide 2</div><div class="swiper-slide">Slide 3</div></div><!-- 如果需要分页器 --><div class="swiper-pagination"></div>
</div>
</body>
<script type="text/javascript">var firstTimeId,secondTimeId,thridTimeId;//所有的定时器var pixels=[];  //存储第一张图片的粒子对象var copyPixels = [];//储存第一张图片的粒子对象var otherPixs = [];//存放了第二张图片的粒子对象var threePixs = [];//存放第三张图片的粒子对象var nowPage=1;// 当前的执行到第几屏var secondFlag = true;var firstFlag = true;var ThridFlag = true;// 初始的图1静态粒子function first(){var canvas=document.getElementById("myCanvas");var ctx=canvas.getContext("2d");var image = new Image();image.src='star.png';var imageData;image.onload=function(){ctx.drawImage(image,0,0,400,400);//上下要一致imageData=ctx.getImageData(0,0,400,400);    //获取图表像素信息var pos=0;var data=imageData.data;    //RGBA的一维数组数据var nowNum=0;for(var i=1;i<=imageData.height;i++){for(var j=1;j<=imageData.width;j++){pos=(i-1)*imageData.width+(j-1); //取得像素位置if(data[pos*4]>0){var pixel= new Yuan(500,j+600,i);// pixel.TofirstX = j;// pixel.TofirstY = i;pixels.push(pixel);}}}drawPic(pixels);  //绘制图像};}// 粒子的构造函数function Yuan(distance,j=rd(50,400),i=rd(50,400)){// let left = (canvas.width)/2.6;// let top = (canvas.height)/4;// this.x = left + j;// this.y = top + i;this.x = j; //当前J就是X轴的坐标, --->绘制时的实时位置this.y = i;//当前的i就是Y轴的坐标this.TofirstX = 0; //第二张图的位置this.TofirstY = 0;this.targetX = 0;//第二张图片的粒子坐标位置this.targetY = 0;this.TothreeX = 0;//第三张图片粒子的坐标this.TothreeY = 0;this.color = '#bbb';//定义粒子的颜色}//绘制方法function drawPic(pixels){var canvas=document.getElementById("myCanvas");var ctx=canvas.getContext("2d");ctx.clearRect(0,0,canvas.width,canvas.height);//清除上一帧var len=pixels.length,curr_pixel=null;for(var i=0;i<len;i+=5){//相隔4个像素点画一个圆,减少粒子的生成curr_pixel=pixels[i];// ctx.fillStyle=curr_pixel.color;// ctx.fillRect(curr_pixel.x,curr_pixel.y,1,1);//第一种画圆方式ctx.beginPath();//第二种画圆方式ctx.strokeStyle = curr_pixel.color;ctx.arc(curr_pixel.x, curr_pixel.y,2, 0, Math.PI*2);ctx.fillStyle="curr_pixel.color";//填充颜色,默认是黑色ctx.fill();//画实心圆ctx.closePath()}}//不论到哪个图,都只改变xy的坐标//到图3的动画轨迹function animateToThree(pixels){var jishu = 0;thridTimeId = setInterval(()=>{jishu = 0;for(var i=0;i<pixels.length;i++){if(pixels[i].x==pixels[i].TothreeX && pixels[i].y==pixels[i].TothreeY){jishu++;continue;}if(pixels[i].x<pixels[i].TothreeX){pixels[i].x += rd(8,30);//每次刷新运动的距离if(pixels[i].x>pixels[i].TothreeX){pixels[i].x=pixels[i].TothreeX;}}else{pixels[i].x -= rd(8,30);if(pixels[i].x<pixels[i].TothreeX){pixels[i].x=pixels[i].TothreeX;}}if(pixels[i].y<pixels[i].TothreeY){pixels[i].y += rd(1,15);if(pixels[i].y>pixels[i].TothreeY){pixels[i].y=pixels[i].TothreeY;}}else{pixels[i].y -= rd(1,15);if(pixels[i].y<pixels[i].TothreeY){pixels[i].y=pixels[i].TothreeY;}}}//绘制结束后关掉定时器if(jishu == pixels.length){clearInterval(thridTimeId);}drawPic(pixels);},50)//刷新时间}//到图2的动画轨迹function animateTo(){//设置定时器 循环改变X,Y轴数据,然后重新绘制var jishu = 0;secondTimeId = setInterval(()=>{jishu = 0;//计数器,记录已经到达目标位置的粒子数量var leng = pixels.length;for(var i=0;i<leng;i++){if(pixels[i].x==pixels[i].targetX && pixels[i].y==pixels[i].targetY){jishu++;continue;}if(pixels[i].x<pixels[i].targetX){pixels[i].x += rd(8,30);//每次刷新运动的距离if(pixels[i].x>pixels[i].targetX){pixels[i].x=pixels[i].targetX;}}else{pixels[i].x -= rd(8,30);if(pixels[i].x<pixels[i].targetX){pixels[i].x=pixels[i].targetX;}}if(pixels[i].y<pixels[i].targetY){pixels[i].y += rd(1,20);if(pixels[i].y>pixels[i].targetY){pixels[i].y=pixels[i].targetY;}}else{pixels[i].y -= rd(1,20);if(pixels[i].y<pixels[i].targetY){pixels[i].y=pixels[i].targetY;}}}//结束掉定时器if(jishu == pixels.length){clearInterval(secondTimeId);}drawPic(pixels);},20)//刷新时间}//到图1的动画轨迹function animateToFirst(){//设置定时器 循环改变X,Y轴数据,然后重新绘制var jishu = 0;firstTimeId = setInterval(()=>{jishu = 0;//计数器,记录已经到达目标位置的粒子数量var leng = pixels.length;for(var i=0;i<leng;i++){if(pixels[i].x==pixels[i].TofirstX && pixels[i].y==pixels[i].TofirstY){jishu++;continue;}if(pixels[i].x<pixels[i].TofirstX){pixels[i].x += rd(8,30);//每次刷新运动的距离if(pixels[i].x>pixels[i].TofirstX){pixels[i].x=pixels[i].TofirstX;}}else{pixels[i].x -= rd(8,30);if(pixels[i].x<pixels[i].TofirstX){pixels[i].x=pixels[i].TofirstX;}}if(pixels[i].y<pixels[i].TofirstY){pixels[i].y += rd(1,20);if(pixels[i].y>pixels[i].TofirstY){pixels[i].y=pixels[i].TofirstY;}}else{pixels[i].y -= rd(1,20);if(pixels[i].y<pixels[i].TofirstY){pixels[i].y=pixels[i].TofirstY;}}}//结束掉定时器if(jishu == pixels.length){clearInterval(firstTimeId);}drawPic(pixels);},20)//刷新时间}//图1的绘制取点function toFirst(){var canvas=document.getElementById("myCanvas");var ctx2=canvas.getContext("2d");ctx2.clearRect(0,0,canvas.width,canvas.height);var image2 = new Image();image2.src='star.png';var imgData = null;image2.onload = function(){ctx2.drawImage(image2,0,0,400,400);imgData=ctx2.getImageData(0,0,400,400);    //获取图表像素信息var pos=0;var data2=imgData.data;    //RGBA的一维数组数据var nowNum=0;for(var i=1;i<=imgData.height;i++){for(var j=1;j<=imgData.width;j++){pos=(i-1)*imgData.width+(j-1); //取得像素位置if(data2[pos*4]>0){var onePix= new Yuan(100,j,i);copyPixels.push(onePix);//把第二张图片的信息放入这个数组里面if(pixels[nowNum]){pixels[nowNum].TofirstX=copyPixels[nowNum].x+600;//把第二张图片的位置赋给粒子对象的目标位置pixels[nowNum].TofirstY=copyPixels[nowNum].y;}else{//第一张图的粒子数量不够,随机添加粒子var addYuan = new Yuan(100);addYuan.TofirstX = copyPixels[nowNum].x;addYuan.TofirstY = copyPixels[nowNum].y;pixels.push(addYuan);}nowNum++;}}}if(pixels.length>copyPixels.length){//如果之前的所生成的粒子太多,让多余的粒子去一个位置for(var k=0;k<pixels.length;k++){if(pixels[k].TofirstX===0 && pixels[k].TofirstY===0){pixels[k].TofirstX= pixels[0].TofirstX;pixels[k].TofirstY= pixels[0].TofirstY;// pixels.splice(k,pixels.length-1-k);// break;}else{continue;}}}}firstFlag = false;}// 图2的绘制取点function toSecond(){var canvas=document.getElementById("myCanvas");var ctx2=canvas.getContext("2d");ctx2.clearRect(0,0,canvas.width,canvas.height);var image2 = new Image();image2.src="font.png";var imgData = null;image2.onload = function(){ctx2.drawImage(image2,0,0,600,400);imgData=ctx2.getImageData(0,0,600,400);    //获取图表像素信息var pos=0;var data2=imgData.data;    //RGBA的一维数组数据var nowNum=0;for(var i=1;i<=imgData.height;i++){for(var j=1;j<=imgData.width;j++){pos=(i-1)*imgData.width+(j-1); //取得像素位置if(data2[pos*4]>0){var onePix= new Yuan(100,j,i);//循环创建粒子,并把创建好的粒子放进数组里otherPixs.push(onePix);//把第二张图片的信息放入这个数组里面// 创建好一个粒子以后,对储存总粒子的数组进行遍历,当前的位置信息赋给粒子的targetxy目标位置if(pixels[nowNum]){pixels[nowNum].targetX=otherPixs[nowNum].x;//把第二张图片的位置赋给粒子对象的目标位置pixels[nowNum].targetY=otherPixs[nowNum].y;}else{//第一张图的粒子数量不够,随机添加粒子var addYuan = new Yuan(100);addYuan.targetX = otherPixs[nowNum].x;addYuan.targetY = otherPixs[nowNum].y;pixels.push(addYuan);}nowNum++;}}}if(pixels.length>otherPixs.length){//如果之前的所生成的粒子太多,让多余的粒子去一个位置for(var k=0;k<pixels.length;k++){if(pixels[k].targetX===0 && pixels[k].targetY===0){pixels[k].targetX= pixels[0].targetX;pixels[k].targetY= pixels[0].targetY;// pixels.splice(k,pixels.length-1-k);// break;}}}}secondFlag = false;}// 图3的绘制取点function toThried(){var canvas=document.getElementById("myCanvas");var ctx3=canvas.getContext("2d");ctx3.clearRect(0,0,canvas.width,canvas.height);var image3 = new Image();image3.src='ling.png';var imgData3 = null;image3.onload = function(){ctx3.drawImage(image3,0,0,800,300);imgData3=ctx3.getImageData(0,0,800,300);    //获取图表像素信息var pos=0;var data3=imgData3.data;    //RGBA的一维数组数据var nowNum=0;for(var i=1;i<=imgData3.height;i++){for(var j=1;j<=imgData3.width;j++){pos=(i-1)*imgData3.width+(j-1); //取得像素位置if(data3[pos*4]>0){var onePix= new Yuan(100,j,i);threePixs.push(onePix);//把第三张图片的信息放入这个数组里面if(pixels[nowNum]){pixels[nowNum].TothreeX=threePixs[nowNum].x;//把第三张图片的位置赋给粒子对象的目标位置pixels[nowNum].TothreeY=threePixs[nowNum].y;}else{//第二张图的粒子数量不够var addYuan = new Yuan(100);//重新创建的粒子随机生成一个位置addYuan.TothreeX = threePixs[nowNum].x;addYuan.TothreeY = threePixs[nowNum].y;pixels.push(addYuan);}nowNum++;}}}if(pixels.length>threePixs.length){//如果上一张图的所生成的粒子太多,让所有多余的粒子去第一个点for(var k=0;k<pixels.length;k++){if(pixels[k].TothreeX===0 && pixels[k].TothreeY===0){pixels[k].TothreeX= pixels[0].TothreeX;pixels[k].TothreeY= pixels[0].TothreeY;// pixels.splice(k,pixels.length-1-k);// break;}}}}ThridFlag = false;}//随机取整方式function rd(n,m){//随机取整var c = m-n+1;return Math.floor(Math.random() * c + n);}first();
</script>
<script>// swiper插件的初始化var mySwiper = new Swiper ('.swiper-container', {direction: 'vertical',// loop: true,//不开启循环autoplayStopOnLast : true,//滑动到最后一屏不再滑动// 如果需要分页器pagination: '.swiper-pagination',mousewheelControl : true,//鼠标滚轮控制// 如果需要前进后退按钮nextButton: '.swiper-button-next',prevButton: '.swiper-button-prev',// 切换的回调函数,每次切换的时候结束掉上一次动画的定时器onSlideChangeStart: function(swiper){console.log(swiper.activeIndex,nowPage);if(swiper.activeIndex===1 && nowPage===1){// 清除剩下的所有的定时器clearInterval(secondTimeId);clearInterval(firstTimeId);clearInterval(thridTimeId);if(secondFlag){toSecond();}nowPage++;animateTo();}else if (swiper.activeIndex===2 && nowPage===2) {clearInterval(secondTimeId);clearInterval(firstTimeId);clearInterval(thridTimeId);if(ThridFlag){toThried();}nowPage--;animateToThree(pixels);}else if(swiper.activeIndex===0 && nowPage===2){clearInterval(secondTimeId);clearInterval(firstTimeId);clearInterval(thridTimeId);if(firstFlag){toFirst();}nowPage=1;animateToFirst();}}})
</script>
</html>

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

SQL注入漏洞全接触
随着B/S模式应用开发的发展，使用这种模式编写应用程序的程序员也越来越多。但是由于这个行业的入门门槛不高，程序员的水平及经验也参差不齐，相当大一部分程序员在编写代码的时候，没有对用户输入数据的合法性进行判断，使应用程序存在安全隐患。用户可以提交一段数据库查询代…...
2024/4/28 3:52:55
前端高效开发和调试工具整理
前端高效开发工具：张成文大神的《现代前端技术解析》中介绍了以下工具：好的开发工具不仅可以提高我们的开发速度，也可以辅助我们写出更高质量的代码。选择什么开发工具因人而异，但好的开发工具，应该要具备以下这些能力：（1）代码格式化format能力，规范化可以避免我们…...
2024/4/17 18:50:30
移动应用界面设计的尺寸规范
移动应用的界面设计画布尺寸设计多大（特别是Android）、图标和字体大小怎么定、需要设计多套设计稿么、如何切图以配合开发的实现？本篇将结合iOS和android官方的设计规范、搜集的资料以及工作中的摸索，来分享移动应用界面设计中的尺寸规范等问题，希望能给移动端的新手设计…...
2024/4/10 5:31:36
关于Tomcat配置MySQL的数据源
1. 首先需要数据库的JDBC驱动，然后放到Tomcat的lib文件夹里驱动可以去官网下载。2. 然后到\Tomcat 9.0\conf\Catalina\localhost\路径下新建一个.xml文件，名字可以任意我这里新建的是asd.xml代码如下：<Context docBase="F:\webapps\test" debug="0" …...
2024/4/27 22:25:36
留言板
HN-CJ高二 QQ：347605798 网名：xzy、xzyxzy、lalaxu、饕餮传奇，曾在情人节那天改名成睡觉不喜欢二次元，喜欢Taylor Swift，喜欢电影至于竞赛成绩......被机房dalao们全方位抱着踩所以评论区是留言板啦欢迎交换友链无意义或不喜欢的人的评论将会被删除祝好。省选前：奶…...
2024/4/28 2:58:18
Tomcat配置登录拦截功能
Tomcat 设置登录验证如果项目较小，设置简单的登录验证,可以通过tomcat设置登录功能，做到简单的项目拦截。添加登录验证后，访问项目的tomcat拦截的弹框如下：这里是将我的项目放到了tomcat/webapps/ROOT下了，这是tomcat访问默认路径，不需要加项目名，即可访问。配置的步骤如…...
2024/4/28 3:03:57
BufferedImage 与像素级渲染
常有人说 Java图形渲染很慢？嗯，相对 C/C++而言， Java2D固有的图像处理能力确实有待提高。但是，这也仅仅局限于对比 C/C++应用而言。如果您是以其它什么东西与之比较，却得出 Java渲染很慢的结论。那么，或者并不是出自 Java本身的原因，而在于您并没能搞清楚该怎样正确的使…...
2024/4/18 12:25:48
骑士CMS SQL注入漏洞
影响版本:通杀程序介绍: 骑士CMS人才系统，PHP人才招聘程序 (www.74cms.com/)漏洞文件：ajax_output.php预览源代码打印关于1 $category_id=trim($_GET[category_id]); 2 3 if (($category_id+0)>0 && intval($category_id)==$category_id) //只用了if判断并没有执行…...
2024/4/19 22:02:03
前端开发必备神器
前端开发必备神器一刀在手，天下我有一、psotman（https://www.getpostman.com/）（链接：http://pan.baidu.com/s/1c6jWkQ密码：a4uh）Postman是一种网页调试与发送网页http请求的chrome插件。我们可以用来很方便的模拟get或者post或者其他方式的请求来调试接口。使用方法：…...
2024/4/17 18:51:47
Java简单实现视频录制播放功能
用Robot类，来连续截取屏幕图片，并通过JLabel连续加载图片，来实现一个视频录制的功能。 StartCapture.java类是主类，用来实现录制桌面图片的功能，以下是代码package CountDown;import java.awt.AWTException; import java.awt.BorderLayout; import java.awt.Dimension; im…...
2024/4/20 6:05:37
Spring Boot修改Tomcat配置
Spring Boot框架默认使用自动嵌入的Tomcat，可以在配置文件中修改Tomcat的一些参数，具体如下：server. Port = xxxxserver. Address =server. contextPath =server. displayName =server. servletPath =server. contextParameters =server. useForwardHeaders =server. server…...
2024/4/28 1:50:48
黑马程序员--学习笔记之SQL注入漏洞攻击
--------------------- Windows Phone 7手机开发 .Net培训期待与您交流！ ---------------------- 1、SQL注入漏洞攻击登录判断：select * from T_Users where UserName=... and Password=...,将参数拼到SQL语句中.构造恶意的Password： ‘ or ’1=1 …...
2024/4/27 23:15:24
支付宝小程序开发练习,显示自定义二维码（四）
之前用了几种方式1.后端生成二维码需要加密的字符窜，小程序前端利用二维码组件渲染canvas画出二维码，由于支付宝小程序没有这样的组件，于是去找微信小程序的解决方案，把微信小程序的二维码前端组件搬过来用，调试到不报错了，结果二维码显示不出来，原因很难找，宣告失败！…...
2024/4/17 18:50:11
目前流行的前端开发框架
作为前端开发者，各种框架的层出不穷，促使我们要不断学习才能防止落后，但是我们不可能做到每个框架都有学习的时间，我们只需要掌握流行的，坑少的即可。从以下三个方面了解目前流行的前端开发框架。 ####一.跨多平台开发框架 (1).uni-app–开发一次，多端覆盖 uni-app 是DCl…...
2024/4/28 6:51:05
闲话网名之-----穿过地狱去看海
博客网名接龙规则：<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" /> 网名接龙到现在越来越长了，是我们之前没想到的。那么我就简单说一下规则，以免新被点到的博友一头雾水： 1、冤有头债有主，在文章开头，附上前一篇的文章…...
2024/4/28 7:58:35
【墨者学院】SQL手工注入漏洞测试(Access数据库)
背景介绍安全工程师"墨者"最近在练习SQL手工注入漏洞，自己刚搭建好一个靶场环境IIS+ASP+Access，Aspx代码对客户端提交的参数未做任何过滤。尽情的练习SQL手工注入吧。实训目标 1.掌握SQL注入原理； 2.了解手工注入的方法； 3.了解Access的数据结构； 4.了解字符串…...
2024/4/17 18:50:17
Axure RP Pro - Widget部件 - 水平线不能调整高度，垂直线不能调整宽度
Axure RP Pro - Widget部件 - 水平线不能调整高度，垂直线不能调整宽度在Axure RP Pro 5中，Horizontal Line“水平线”的高度固定为10像素，而Vertical Line“垂直线”的宽度固定为10像素。在大多数情况下不影响原型的设计，当需要修改时，可以使用Rectangle“矩形”代替Hori…...
2024/4/20 4:06:06
java 图片生成视频完成录屏操作
前段时间做IOS自动化需要完成录屏操作，但是已经能够获取手机屏幕的一张张图片，通过下面java代码能够使得生成的连续的图片变成视频，代码如下：DefaultMovieInfoProvider dmip= new DefaultMovieInfoProvider("dst.avi");//生成视频的名称 dmip.setFPS(…...
2024/4/20 15:11:41
我亲眼见证了一场黑客“机机”大战，黑马冠军的手法很skr
上周，雷锋网编辑收到永信至诚小伙伴的私聊，“小老弟，周末我们有场机机大战来不来？” 见编辑发送过去迷惑的表情包，对方进一步解释到，“就是RHG大赛（Robo Hacking Game），给黑客解放双手，让他们搞出来的机器人互相PK。”很难想象网络安全大赛上黑客们不搞机了，开始嗑瓜…...
2024/4/18 23:33:30
php sql注入漏洞与修复
出于安全考虑，需要过滤从页面传递过来的字符。通常，用户可以通过以下接口调用数据库的内容：URL地址栏、登陆界面、留言板、搜索框等。轻则数据遭到泄露，重则服务器被拿下。一、SQL注入的步骤 a) 寻找注入点(如：登录界面、留言板等) b) 用户自己构造SQL语句(如： or 1=…...
2024/4/20 12:35:37

canvas简单实现图片的粒子动画

相关文章

最新文章