新浦京81707con > 首页 > 制作图片粒子效果,打造高大上的Canvas粒子动画

原标题:制作图片粒子效果,打造高大上的Canvas粒子动画

浏览次数:83 时间:2019-05-02

制作高大上的Canvas粒子动画

2016/08/22 · HTML5 · 5 评论 · Canvas

初稿出处: 腾讯ISUX   

先是来看下大家筹划要做的粒子动画效果是怎么着的~

是这样:

新浦京娱乐场官网app 1

依然是如此:

新浦京娱乐场官网app 2

还是是这样:

新浦京娱乐场官网app 3

很酷炫!

这怎么着去落成类似上边的粒子动画以致遵照本人的喜好去做越来越多别的轨迹的动画片呢~请看下边详细的教学。

率先看一下源图和调换来粒子效果的看待图:

前面的话

新浦京娱乐场官网app 4     新浦京娱乐场官网app 5

本文将从最大旨的imageData对象的理论知识说开去,详细介绍canvas粒子系统的创设

技巧接纳

因为粒子数量过多,而且涉及到图像像素管理,所以那边运用Canvas是不贰选项。

 

留意,以下演示的代码只是关键代码,入眼在于消除思路。

左侧图片为源图,左侧图片为粒子效果图。该意义是在Canvas画布上制作的。将图片制作成粒子效果相对来讲是相比较轻巧的。珍视精通八个知识点就能够

imageData

1、绘制粒子概略图

首先要在canvas画布上绘制一个由粒子构成的概略图,记录下每1个粒子的坐标,那样才干有继续的卡通片。

一:图片是透过image对象情势绘制在画布上的,然后使用Canvas的getImageData接口,获取图像的像素音讯。

有关图像数据imageData共有二个法子,包罗getImageData()、putImageData()、createImageData()

1. 创设2个<canvas>成分,并得到Canvas画布渲染上下文

新浦京娱乐场官网app 6

< canvas>是一个双标签成分,通过width和height的值来设置画布的大大小小。至于ctx(画布渲染上下文),能够领略为画布上的画笔,大家得以经过画笔在画布上随意的绘图图案。假使浏览器不援救canvas会一贯浮现<canvas>标签中间本身设定的文字。当然<canvas>标签中间也得以是一张当不扶助canvas时要求替换展现的图片。

 

2. 行使canvas的图像操作API绘制图像

制图图像的机要API及参数表明:

新浦京娱乐场官网app 7

引用MDN上的一张图会相比较清晰的来看每一种参数的效果:

新浦京娱乐场官网app 8

drawImage就是把三个image对象只怕canvas上(以至是video对象上的的每1帧)钦定地方和尺寸的图像绘制到如今的画布上。而在大家的供给中,是要把全体图像绘制到画布中。

新浦京娱乐场官网app 9

对应浏览器看到的效果:

新浦京娱乐场官网app 10

 

var imageData=ctx.getImageData(x, y, width, height);

【getImageData()】

三. 到手图像的像素新闻,并依照像素消息重新绘制出粒子效果概略图

canvas有一个叫getImageData的接口,通过该接口能够赢得到画布上点名地方的一体像素的多寡:

新浦京娱乐场官网app 11

把收获的imageData输出到调节台能够见到,imageData包罗四个属性:

新浦京娱乐场官网app 12

个中,width、height是读取图像像素音信完整区域的增进率和冲天,data是多个Uint八ClampedArray类型的壹维数组,包蕴了整整图片区域里种种像素点的RAV四GBA的整型数据。这里不可不要通晓这么些数组所保存像素音信的排序规则,请看下图描述的data数组:

新浦京娱乐场官网app 13

每2个色值攻下data数组索引的贰个地方,一个像素有个5个值(QX56、G、B、A)攻陷数组的陆个目录地点。遵照数列规则能够知晓,要获得第n个职位(n从一开头)的库罗德、G、B像素音讯便是:揽胜极光n = (n-一)*4 ,Gn = (n-1)*4 1 ,Bn = (n-1)*4 2  ,so easy~  当然,实际上海体育场合像是1个囊括image.height行,image.width列像素的矩形而不是单独的一条龙到甘休的,这几个n值在矩形中要总结下:

新浦京娱乐场官网app 14

是因为3个像素是富含陆个索引值(rgba)的,所以拿到图像中第i行第j列的Tiggo、G、B、A像素新闻就是Rij = [(j-1)*imageData.width (i-1)]*4 ,Gij = [(j-1)*imageData.width (i-1)]*4 1,Bij = [(j-1)*imageData.width (i-1)]*4 2,Aij = [(j-1)*imageData.width (i-1)]*四 三 。各种像素值都得以获得了!

接下去将要把图像的粒子化轮廓图画出来了。那么,如何做那个概况图啊,大家先读取各种像素的音讯(用到上边的计算公式),要是这几个像素的色值符合要求,就保存起来,用于绘制在画布上。别的,既然是做成粒子的法力,大家只要求把像素粒子保存一部分,展现在画布上。

具体做法是,设定每一行和每一列要显得的粒子数,分别是cols和rows,一个粒子代表三个单元格,那么各种单元格的的宽高正是imageWidth/cols和imageHeight/rows,然后循环的决断种种单元格的首先个像素是还是不是满足像素值的尺度,假使满意了,就把那些单元格的坐标保存到数组里,用作后续绘制图案用。

主要参考代码:

新浦京娱乐场官网app 15

用1体化代码做出的demo及效果:

新浦京娱乐场官网app 16

迄今截止,粒子梗概图壹度创设形成。

 

参数表达:x,y为画布上的x和y坐标

二D上下文能够透过getImageData()取得原始图像数据。那个点子接收伍个参数:画面区域的x和y坐标以及该区域的像素宽度和惊人

二、制作粒子动画

构建粒子动画分二种:

一种是粒子漂浮类,那种相比轻便,只需求自由的改观各种粒子的岗位值,然后直接实践setInterval或许requestAnimationFrame重摄影布就能够,具体的功力因人喜好而去设定,就不现实解说了,做了个大概的粒子漂浮的例子。

另一种是粒子的轨迹动画,那么些相对复杂一些。这里要介绍的是每种粒子遵照钦定的轨迹在钦命的时刻内做位移,最后集聚成钦点图案的卡通片效果(也正是小说1起初的动作效果),要做成那类动画效果供给缓慢解决五个难题:3个是卡通轨迹,别的贰个是各种粒子施行动画的时机。

     width,height为博得内定区域图像的音讯

举例,要得到左上角坐标为(十,伍)、大小为50*50像素的区域的图像数据,能够应用以下代码:

粒子动画轨迹

动画位移的轨道,最遍布的正是单位时间内转移定位的位移值,从而完成动画效果。但要做到光彩夺目的功能依赖那种干燥固定的移动肯定是丰裕的。所以位移能够依据缓动函数去达成单位时间内转移不一样等的位移值,从而实现尤其的法力。

重回值表达:imageData为重临值,它是3个对象,包罗两个特性

var imageData = context.getImageData(10,5,50,50);

创造缓动作效果果有二种办法:

一种是温馨设定好调控点,然后通过贝塞尔曲线公式来计量各个单位时间的坐标值。

引用了wikipedia在那之中的图:

新浦京娱乐场官网app 17新浦京娱乐场官网app 18

上边四个图都以在绘制一条特定曲线,能够看看二遍曲线要求3个特定调控点P一,3次曲线要求多少个特定调控点P1和P2来规定一条曲线,高阶曲线乃至须要更加多的调控点来明确曲线轨迹。

求曲线的公式是依据德卡斯特Rio算法计量得来的,直接上公式。

2遍曲线对应的公式:

新浦京娱乐场官网app 19

2回曲线对应的公式:

新浦京娱乐场官网app 20

从公式能够见到,只要显明调控点坐标、起头坐标和顶峰坐标后,就足以分明了一条曲线,然后就能够依据曲线公式求出每种时刻t对应的地方值B(t)。

自然使用那种办法须求团结去制定调节点坐标,计算也相比较复杂,完成起来很麻烦。没事,我们还有其余方式规定曲线。

 

其余①种格局正是应用已有的缓动函数,无需本人制造调节点,这里推荐有名的Tween算法的缓动函数,用个中一个缓动函数来介绍下参数值,别的缓动函数所传的参数值是同样的:

新浦京娱乐场官网app 21

是还是不是以为很熟稔?对正确,jquery用的动画扩大插件easing.js正是Tween算法的缓动函数。有了那现存的缓动函数,就足以制定粒子的发轫点、终点(终点就是绘画本人的坐标地方)以及动画施行持续时间来做大家要的效率。

关键参考代码:

新浦京娱乐场官网app 22

依附参考代码做出三个效果:

新浦京娱乐场官网app 23

嗯,动画效果是有了,但总感到不太对劲。。。唔,仔细调查一下,是画画动画试行太过完整了,未有通晓的颗粒动画效果,那就引出粒子动画的另三个关键点,粒子施行动画的空子。

 

imageData={
    data:Unit8ClampedArray[10000] //一个包含图片区域内每个像素点的RGBA的整型数据信息
    height:200   //读取的图片像素信息区域高度
    width:200   //读取的图片像素信息区域宽度
}

归来的靶子是ImageData的实例,每一个ImageData对象有一天本性:widthheightdata

粒子施行动画的时机

要让粒子效果比较通晓,那就不能让动画片效果实践太过完整了,必要让图案上各个粒子有例外的光阴距离运维,依据早晚的规律交错的进行动画。这里的粒子运转间隔有三种,1种是每1行粒子奉行时间间隔,要让每1行的粒子运维时间有规律错开;此外壹种是每1行粒子之间运营时间私自的错开,那样实行的粒子动画才会有一种等级次序感和各类粒子有独立动画的颗粒感。看下加了粒子运转时间距离之后的效果对比:

新浦京娱乐场官网app 24

比上面不加粒子运营时间间隔的效应好些个了。

 

哦,介绍大概就是那样了,要是上面介绍的法子依然消除不了难题来讲,还有办法。。。小编把粒子动画效果和Tween的缓动函数一同装进了一下。直接配备一下就能够用了。 用法正是开创三个含有id的canvas,设定好宽度和惊人,引进particle.min.js,然后配置一下参数就可以, demo:

新浦京娱乐场官网app 25

唯有canvasId、imgUrl、cols、rows是必填的,别的参数都以依靠需求团结选填。  ( ͡° ͜ʖ ͡°)✧

 

二:精晓像素区域数据的排布表明,以上得到的图纸数据像素音信(imageData对象中的data属性)为哈弗GBA整型的一维数组数据。三个像素是有五个值(汉兰达,G,B,A)组成的。也正是说,数组音信每八个为叁个像素点。由此,有以下规则,

一、width:表示imageData对角的小幅度

正文部分图片引用来自

  • https://zh.wikipedia.org

    3 赞 12 收藏 5 评论

新浦京娱乐场官网app 26

  第二个像素新闻为:君越GBA(data[0],data[1],data[2],data[3])

2、height:表示imageData对象的冲天

      第二个像素音信为:凯雷德GBA(data[4],data[5],data[6],data[7])

叁、data是多少个数组,保存着图像中每三个像素的数码。在data数组中,每三个像素用四个因一直保存,分别代表red、green、blue、光滑度

      .....

[注意]图像中有个别许像素,data的尺寸就相当于像素个数乘以4

      第N个像素新闻为: KugaGBA(data[(n-1)*4],data[(n-1)*4 1],data[(n-1)*4 2],data[(n-1)*4 3])

//第一个像素如下
var data = imageData.data;
var red = data[0];
var green = data[1]; 
var blue = data[2];
var alpha = data[3];

      .....

数组中每一个成分的值是在0-255里面,能够直接待上访问到原来图像数据,就可见以各类法子来操作那一个多少

  其它,像素区域既然是二个区域,它是有宽和高的。上边的推算公式适合单独1行选取固定2个像素点。所以总括像素点时要思虑到在全数图像区域内一定:

[注意]假设要利用getImageData()获取的canvas中包涵drawImage()方法,则该办法中的U奥迪Q5L无法跨域

  以上海教室为例。图像的宽和高都为200,假如根据每3个像素为一行一列时。则该图像共有200行,200列。所以要取得i 行第 j 列的像素开首地点消息为:

【createImageData()】

      var pos =[( i-1 )*200]新浦京娱乐场官网app , ( j-1 )]*4;

createImageData(width,height)方法创造新的空白ImageData对象。新目的的暗中同意像素值 transparent black,也正是rgba(0,0,0,0)

  在那之中,公式中的 i 表示行数,j 表示列数。200为图像的大幅。

var imgData = context.createImageData(100,100);

demo代码:

【putImageData()】

<!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/EchartDemostar.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>

putImageData()方法将图像数据从钦赐的ImageData对象放回画布上,该格局共有以下参数

 

imgData:要放回画布的ImageData对象(必须)
x:imageData对象的左上角的x坐标(必须)
y:imageData对象的左上角的y坐标(必须)
dirtyX:在画布上放置图像的水平位置(可选)
dirtyY:在画布上放置图像的垂直位置(可选)
dirtyWidth:在画布上绘制图像所使用的宽度(可选)
dirtyHeight:在画布上绘制图像所使用的高度(可选)

上面要是不理解, 对照代码运营一下试试精通啊:

[注意]参数3到柒要么都并未有,要么都设有

惋惜本身数学不好,算法不会。无法为粒子加上炫人眼目的动态效果~~其实能够找一些算法让粒子动起来的,有意思味能够做做看~

context.putImageData(imgData,0,0);
context.putImageData(imgData,0,0,50,50,200,200);

本文由新浦京81707con发布于首页,转载请注明出处:制作图片粒子效果,打造高大上的Canvas粒子动画

关键词: 新浦京81707con HTML5 javascript Canvas

上一篇:新浦京Component的源码示例,5分钟学一学Web

下一篇:没有了