canvas粒子动画

2019独角兽企业重金招聘Python工程师标准>>>

周末在家玩了一下canvas粒子动画，先看看效果，用的图是我们微众银行的干爹‘qq’，先看看效果

##1.获取图片信息 ###1.1首先将想要绘制的图片绘制到canvas画布上

var drawImg=function(url){var img=new Image();img.src=url;img.onload=function(){imgW=img.width;imgH=img.height;imgStartX=(w-imgW)/2;imgStartY=(h-imgH)/2;context.drawImage(img,imgStartX,imgStartY);particleGenerate(img);draw();}}

###1.2.获取图像信息

        var data=context.getImageData(imgStartX,imgStartY,imgW,imgH).data;

将第一步绘制的图像信息通过getImageData读取，getImageData获取到的对象中的data属性里面放的就是图像的像素信息。每四位数字表示一个像素的信息，为该像素的rgba值。

我们最终是通过一个坐标点绘制一个粒子，因此我们不需要获得图像的每个像素信息。因此我们的采样是有一定步长的。我这里采用的是‘3’

for(var i=0;i<imgH;i+=3){for (var j=0;j<imgW;j+=3){var particle={};//去除透明部分if(data[i*imgW*4+j*4+3]>50){......particles.push(particle);}}}

##2.处理图像信息为了避免不必要的绘制操作，我们首先就去掉透明像素部分，而不是在绘制时使用透明画笔绘制。为了保证一定的容错率，我选择是‘50’，而不是0。

if(data[i*imgW*4+j*4+3]>50){particle.fillStyle='rgba('+data[i*imgW*4+j*4]+','+data[i*imgW*4+j*4+1]+','+data[i*imgW*4+j*4+2]+','+data[i*imgW*4+j*4+3]+')';}

将取到的像素信息赋值给canvas的画笔，这里有个优化的点。如果你的图像颜色很简单，而且区域分的很明显，你是没必要这样计算每个点的颜色值的。直接取一个点，然后赋值给相应的区域。

##3.绘制的缓动函数为了让粒子动画不要过于死板，我们按照行数，给予不同的延迟；同时每个的x和y方向也给予不同的延迟。我这里使用的是easeInOutQuad

//e:当前帧的时间
//a:初始值
//g:最终值减去初始值
//f:整个动画持续时间
Math.easeInOutQuad = function (e, a, g, f) {e /= f / 2;if (e < 1) {return g / 2 * e * e + a}e--;return -g / 2 * (e * (e - 2) - 1) + a};

转载于:https://my.oschina.net/xiaoweibaer/blog/782507

canvas粒子动画相关推荐

看你骨骼惊奇，这里有一套 Canvas 粒子动画方案了解一下？
导语:在日常的开发过程中,我们会常常会用到canvas来制作一些动画特效,其中有一个动画种类,需要我们生成一定数量,形状类似且行为基本一致的粒子,通过这些粒子的运动,来展现动画效果,比如:下雨,闪烁的 ...
前端canvas粒子动画背景（带鼠标跟随和点击散开）
目录闲聊看下效果先贴下代码吧大概说一下流程下面让我来详细说一下 1.初始化基础属性 2.添加鼠标移动事件并实时更新鼠标坐标 3.通过随机数生成粒子的坐标和横纵轴速度 4.渲染粒子并将粒子对象 ...
html图像粒子转换动画,html5 canvas粒子动画生成图片特效
特效描述:html5 canvas 粒子动画生成图片特效.html5基于canvas粒子化图片利用easying.js公式计算粒子动态轨迹方程, x轴方向和y轴方向的公式均可以选择可以设置粒子运 ...
打造高大上的Canvas粒子动画
首先来看下我们准备要做的粒子动画效果是怎么样的~ 是这样: 或者是这样: 甚至是这样: 很酷炫! 那如何去实现类似上面的粒子动画甚至根据自己的喜好去做更多其他轨迹的动画呢~请看下面详细的讲解. 技术选 ...
html粒子动画效果设置为背景,canvas粒子动画背景的实现示例
效果 :) 不带连线效果: 带连线的效果: 教程要实现这样的效果其实很简单,大概分为这么几个步骤: 创建canvas 首先需要在需要展示粒子背景的父元素中创建一个canvas标签, 指定width和 ...
JavaScript动画特效——Canvas粒子动画
这次,将制作飘雪的效果,如果用CSS动画样式来做的话,可以想象,那是有多么难.所以就用JavaScript来制作. Canvas官方教程,很详细:http://canvas.migong.org/ca ...
fastadmin后台login登录页面增加canvas粒子动画背景
地址演示地址登录 <!DOCTYPE html> <html> <head><link rel="stylesheet" media=&q ...
Canvas之粒子动画
首先添加一个canvas: <canvas id="canvas"></canvas> 1 1 下面是样式: <style>#canvas{po ...
html制作的动态粒子图像,一种基于AnimateCC+Canvas的随机粒子动画效果设计
潘博摘要:粒子动画是一种应用广泛的动画效果,也有不同的制作方法.Animate CC是Flash的延续和发展,在动画制作方面功能强大,而Canvas是HTML5在网页中绘制图形.制作动画的核心元素. ...

canvas粒子动画

canvas粒子动画相关推荐

最新文章

热门文章