借场雪吧~ js下雪动画 canvas画布实现下雪特效

这里我直接放在了app下面，因为我就下3秒。要一直下的建议换个位置哈。

<div id="app"></div>
<canvas id="canvas" style="position: absolute;top: 0;"></canvas>

纯js代码实现：

var width = window.innerWidth; //获取系统显示宽度;
var height = window.innerHeight; //获取系统显示高度;
var canvas = document.querySelector("#canvas");
var context = canvas.getContext("2d");
var snowArray = []; //声明一个数组，用于存放创建出来的雪花对象；canvas.width = width; //设置画布的宽度为系统显示宽度;
canvas.height = height; //设置画布的高度为系统显示高度;cartoon(); //调用动画;class Snowflake {constructor() {this.init(); }/*** @description: 雪花位置* @return void*/init() {this.position = {x: Math.random() * width, //x坐标随机;y: Math.random() * height, //y坐标随机;} //雪花对象的位置;this.speed = Math.random() * 10; //雪花下落速度为0-10以内的随机数;this.r = Math.random() * 6; //雪花的半径为0-6以内的随机数;this.transparency = Math.random(); //设置雪花的透明度为随机;this.color = {r1: Math.random() * 255,g: Math.random() * 255,b: Math.random() * 255,} //雪花颜色随机;}/*** @description: 绘制雪花* @return void*/draw() {this.position.y++; //y坐标每次递增1像素;this.transparency -= 0.005; //透明度每次递减0.05;if (this.transparency <= 0) {// this.init();} //雪花透明度小于0，要循环下学就再次调用init()context.beginPath(); //开始一个新的图形绘制;context.fillStyle = "rgba(" + this.color.r1 + "," + this.color.g + "," + this.color.b + "," + this.transparency + ")"; //根据类模型绘制圆形雪花;context.arc(this.position.x, this.position.y, this.r, 0, Math.PI * 2); //填充雪花的颜色;context.fill();}
}for (var i = 0; i < 1225; i++) {var snow = new Snowflake(); //实例化雪花对象;snowArray.push(snow); //将雪花对象添加到数组中;
}/**
* @description: 开启动画
* @return void
*/
function cartoon() {context.clearRect(0, 0, width, height); //动画完成一次进行清屏操作;for (var j = 0; j < snowArray.length; j++) {snowArray[j].draw(); //将实例化好的每个雪花对象在画布上画出来;}var requestId = requestAnimationFrame(cartoon); //递归调用动画效果;if (requestId > 200) {cancelAnimationFrame(requestId)//删掉画布var self = document.getElementById('canvas');var parent = self.parentElement;var removed = parent.removeChild(self);}
}

我这里设置的是雪花融化（不透明）就消失，并在3秒后移除这个画布。

如果想要一直下雪的，把雪花消失注释掉的init()放出来，requestId > 200不删掉画布就好了。

这场雪借至 JS实现雪花飘落特效效果_这里是博客标题-CSDN博客_js雪花特效代码

借场雪吧~ js下雪动画 canvas画布实现下雪特效相关推荐

html页面下雪动画实例,HTML5实现下雪实例
下雪实例知识点: canvas画布数组绘画函数效果: 源码: ------------------------------ html> 下雪 *{padding:0;margin:0} ...
原生JS利用HTML5 CANVAS画布布局点状连线图
HTML代码 <canvas id="myCanvas" width="1920px" height="1080px">< ...
canvas画布js代码实现大风车的动画
通过js代码在canvas画布中实现大风车的动画 <!DOCTYPE html> <html lang="en"> <head><meta ...
Android下雪动画 VS JS下雪动画
Android下雪动画的实现自定义View package com.shanjing.snowflake;import android.content.Context; import android ...
2月10日，北京下雪了，今年冬天第一场雪
早晨起来下雪了,2011年的第一场雪, 今年冬天的第一场雪. 雪非常大,出来的时候一直在下. 地面厚厚的一层. 空气里充满了湿润的气息,有股泥土的味道. 很舒服,久违了的空气. 忘记开窗换气了,真傻. ...
更新——Canvas画布动画效果之实现倒计时
Hello,大家好! 小W复活啦!继续欢乐的给大家更博,输送新知识~~ 不开玩笑啦!秒进正题~~~ 上次更博,小W给大家介绍了Canvas画布的基础部分,以及实现了一个由7*10点阵图显示的倒计时的基 ...
html5 canvas图表,Chart.js基于Canvas画布的HTML5统计图表库 - 资源分享
Chart.js 是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库.可以绘制柱状图.热点图.曲线图等,使用HTML5中的Canvas画布,支持原生的和jQuery的调用方法. 特点 6种图表 ...
vue canvas插件_基于vue.js 制作在线桌椅定制选择交互特效源码
码农那点事儿关注我们,一起学习进步基于vue.js写的在线桌子椅子垫子选择拼成的自己理想的书桌椅图像,这是一款交互式的课桌椅在线定制选择功能.非常不错,感兴趣的朋友前来下载使用. 下载源码(提取码 ...
hpuoj 1715: 感恩节KK专场——2015年的第一场雪（暴力）
1715: 感恩节KK专场--2015年的第一场雪时间限制: 1 Sec 内存限制: 128 MB 提交: 884 解决: 82 [提交][状态][讨论版] 题目描述下雪了,KK学长站在三教门 ...

借场雪吧~ js下雪动画 canvas画布实现下雪特效

借场雪吧~ js下雪动画 canvas画布实现下雪特效相关推荐

最新文章

热门文章