h5canvas怎么弄雪花飘落特效

　　介绍

h5canvas怎么弄雪花飘落特效?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!

最终效果图如下:

h5canvas怎么弄雪花飘落特效

图1

<强>一、需求分析

1,圆形雪花

本示例中雪花形状使用圆形

2,雪花数量固定

根据图1仔细观察白色雪花数量,飘落过程中,整张图的雪花数量应该是固定的,这个需求是需要通过我们观察分析所得。这与我们现实生活中看到一幅雪花满天飞的场景是一致的。

3,雪花大小不一致

每朵雪花它们大小各有不同,也就意味着雪花的半径是随机的。这与我们现实生活中看到一幅雪花满天飞的场景也是一致的。

4,雪花位置在移动

雪花飘落,自然它们的位置也在移动。

<强>二,知识点

1,使用Html5画布+ JavaScript画圆,构成圆形雪花

在Html5中,需要使用帆布同时借助JavaScript画圆,以构成圆形雪花——弧(x, y, r,启动、停止),

2,随机数,产生不同半径,坐标的圆形雪花

本示例中,网页第一次加载时,需要生成一定数量的不同半径及位置的雪花,故半径,坐标为随机数;雪花在飘落过程中,其半径不变,坐标在一定幅度内变化,故此时坐标也为随机数,math . random ()

<强>三,程序编写

<强> 1,准备工作

放一个画布画布,并且设置整个身体背景色为黑色

HTML代码:

& lt;帆布id=癿ycanvas"比; 　　您的浏览器不支持帆布画布 　　& lt;/canvas>

CSS代码:

* { 　　保证金:0; 　　填充:0; 　　} 　　# mycanvas { 　　背景:黑色; 　　}

此时效果如如下:

h5canvas怎么弄雪花飘落特效

注意:帆布默认是有一个初始化高度和宽度的,所以不用去纠结

<强> 2,画布满屏显示

JavaScript代码如下:

//获取mycanvas画布 　　var=. getelementbyid (“mycanvas"); 　　var ctx=can.getContext (“2 d");//画布宽度 　　var wid=window.innerWidth;//画布高度 　　var黑=window.innerHeight; 　　can.width=wid; 　　can.height=黑;

此时效果如如下:

h5canvas怎么弄雪花飘落特效

<强> 3,初始化生成固定数量的雪花

根据我们上述需求分析及知识点解读,首先雪花的数量是固定的,所以我们需要定义一个变雪量var=100;这里假设雪花数量为100,

生成雪花的时候,每个雪花半径,位置都不同,我们把每个雪花当做一个对象,那么这个对象的属性就包含:半径,坐标(X, Y),那么一个雪花对象可以写成var snowOject={X: 1, Y: 10 r: 5},这里就代表一个坐标为(1,10)半径为5的圆形雪花;本示例中由于半径和坐标都为随机数,故使用math . random()分别为100个雪花生成半径,坐标(X, Y);

那我们这里是100个雪花,所以为了方便后面操作,就用一个数组保存这100个雪花对象。

JavaScript代码如下:

//雪花数目 　　雪var=100;//雪花坐标,半径 　　var arr=[];//保存各圆坐标及半径 　　(var=0;我& lt;雪;我+ +){ 　　arr.push ({ 　　x: math . random () * wid, 　　y: math . random() *黑, 　　r: math . random () * 10 + 1 　　}) 　　}

<强> 4,绘制雪花

上面我们已经将100个雪花半径,坐标(X, Y)生成,下面就是循环使用帆布画出雪花了(这里就是画圆),这里定义一个函数

JavaScript代码如下:

//画雪花 　　函数DrawSnow () { 　　ctx.fillStyle=皐hite"; 　　ctx.beginPath (); 　　(var=0;我& lt;雪;我+ +){ 　　var的arr p=[我]; 　　ctx.moveTo (p.x p.y); 　　ctx.arc (p.x p.y’变为贬义词,0,2 * Math.PI,假); 　　} 　　ctx.fill (); 　　 　　ctx.closePath ();

然后调用DrawSnow()函数,效果如下:

h5canvas怎么弄雪花飘落特效

可以尝试多次刷新网页看是否会生成不同大小,位置的雪花(正常情况下是可以的),做到这里就已经接近最终效果了

h5canvas怎么弄雪花飘落特效