怎么用帆布实现简单的下雪效果 - 行业资讯 - 肥雀云

　　介绍

这篇文章将为大家详细讲解有关怎么用帆布实现简单的下雪效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

首先新建一个html文件,将身体的背景设置为天空的那种深蓝色,并创建一个帆布,帆布的操作逻辑都放在雪。js中:

画布的操作将在页面加载完之后执行,首先获取到画布上的二维情况下,并将画布宽高设置为窗口的宽高,确保天空背景铺满整个窗口。<代码>雪。js代码:

窗口。onload=function () { 　　画布var=. getelementbyid(& # 39;天空# 39;); 　　var ctx=canvas.getContext (& # 39; 2 d # 39;); 　　　　var W=window.innerWidth; 　　var H=window.innerHeight; 　　画布。宽度=W; 　　画布。身高=H; 　　}

天空背景完成后,我们来创建雪花,思路比较简单,我们让屏幕上保持一个额定数量的雪花,并给每个雪花一个随机的位置,随机的大小以及随机的下落速度:

… 　　　　var flakesCount=100;//雪花个数　　var片=[]; 　　　　(var=0;我& lt;flakesCount;我+ +){ 　　flakes.push ({ 　　x: math . random () * W//雪花x轴位置　　y: math . random () * H,//雪花y轴位置　　r: math . random() * 5 + 2//雪花的半径　　d: math . random() + 1//雪花密度,用于控制下落速度　　}); 　　}

接下来我们需要将这100个雪花绘制出来,简单起见,我们就用一个个白色的小圆表示雪花:

函数drawFlakes () { 　　ctx。clearRect (0, 0 W H); 　　ctx。fillStyle=& # 39; # fff& # 39;; 　　ctx.beginPath (); 　　(var=0;我& lt;flakesCount;我+ +){ 　　var片=片[我]; 　　console.log(片); 　　ctx.moveTo(片状。x, flake.y); 　　ctx.arc(片状。x,片状。y,片状。r, 0,数学。π* 2,真实); 　　} 　　ctx.fill (); 　　moveFlakes ();//todo:雪花飘动效果　　}

雪花绘制完成后,我们需要让雪花动起来,有飘落的效果。我们思路是设置一个定时器,每隔25 ms重新渲染一次画布,每次渲染每个雪花往下移动一段距离,雪花密度越大下落速度越快。并且通过<代码>数学。罪> var角=0; 　　　　函数moveFlakes () { 　　角+=0.01; 　　(var=0;我& lt;flakesCount;我+ +){ 　　var片=片[我]; 　　片状。y +=Math.pow(片状。d, 2) + 1;//速度和密度实际上不是平方的关系,这么些是为了效果更加错落有致　　片状。x +=sin(角)* 2; 　　　　如果(片状。y比;H) { 　　片[我]={x: math . random () * W, y: 0, r:片状。r, d:片状。d}; 　　} 　　} 　　} 　　　　setInterval (drawFlakes 25);

完成,我们来看一下实际效果:

怎么用帆布实现简单的下雪效果

嗯,还挺像那么回事儿:)

完整代码:

& lt; !DOCTYPE html> 　　& lt; head> 　　& lt; style> 　　身体{ 　　background - color: # 102 a54; 　　} 　　& lt;/style> 　　& lt;/head> 　　& lt; body> 　　& lt;帆布id=& # 39;天空# 39;祝辞& lt;/canvas> 　　https://www.yisu.com/zixun/& lt;脚本src=" snow.js "> 　　　　　　窗口。onload=function () {//得到画布和上下文　　画布var=. getelementbyid(& # 39;天空# 39;); 　　var ctx=canvas.getContext (& # 39; 2 d # 39;);//设置画布dim窗口高度和宽度　　var W=window.innerWidth; 　　var H=window.innerHeight; 　　画布。宽度=W; 　　画布。身高=H;//生成雪花和应用属性　　var flakesCount=100; 　　var片=[];//片状实例//遍历空片和应用属性　　(var=0;我& lt;flakesCount;我+ +){ 　　flakes.push ({ 　　* W x: math . random (), 　　y: math . random () * H, 　　r: math . random () * 5 + 2//2 px - 7 px 　　d: math . random () + 1 　　}); 　　}//画片>关于怎么用帆布实现简单的下雪效果就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。