JS實現雪花飄落動畫步驟詳解

來源：懂視網責編：小采時間：2020-11-27 19:42:49

JS實現雪花飄落動畫步驟詳解

JS實現雪花飄落動畫步驟詳解:這次給大家帶來JS實現雪花飄落動畫步驟詳解，JS實現雪花飄落動畫的注意事項有哪些，下面就是實戰案例，一起來看一下。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta

推薦度：

點擊下載本文 文檔為doc格式

導讀JS實現雪花飄落動畫步驟詳解:這次給大家帶來JS實現雪花飄落動畫步驟詳解，JS實現雪花飄落動畫的注意事項有哪些，下面就是實戰案例，一起來看一下。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta

這次給大家帶來JS實現雪花飄落動畫步驟詳解，JS實現雪花飄落動畫的注意事項有哪些，下面就是實戰案例，一起來看一下。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>JS下雪動畫</title>
 <meta name="description" content="">
 <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
 .masthead {
 background-color:#333;
 display:block;
 width:100%;
 height:400px;
 }
</style>
<body>
<p class="masthead"></p>
<script>
 (function () {
 var COUNT = 300;
 var masthead = document.querySelector('.masthead');
 var canvas = document.createElement('canvas');
 var ctx = canvas.getContext('2d');
 var width = masthead.clientWidth;
 var height = masthead.clientHeight;
 var i = 0;
 var active = false;
 function onResize() {
 width = masthead.clientWidth;
 height = masthead.clientHeight;
 canvas.width = width;
 canvas.height = height;
 ctx.fillStyle = '#FFF';
 var wasActive = active;
 active = width > 600;
 if (!wasActive && active)
 requestAnimFrame(update);
 }
 var Snowflake = function () {
 this.x = 0;
 this.y = 0;
 this.vy = 0;
 this.vx = 0;
 this.r = 0;
 this.reset();
 };
 Snowflake.prototype.reset = function() {
 this.x = Math.random() * width;
 this.y = Math.random() * -height;
 this.vy = 1 + Math.random() * 3;
 this.vx = 0.5 - Math.random();
 this.r = 1 + Math.random() * 2;
 this.o = 0.5 + Math.random() * 0.5;
 };
 canvas.style.position = 'absolute';
 canvas.style.left = canvas.style.top = '0';
 var snowflakes = [], snowflake;
 for (i = 0; i < COUNT; i++) {
 snowflake = new Snowflake();
 snowflakes.push(snowflake);
 }
 function update() {
 ctx.clearRect(0, 0, width, height);
 if (!active)
 return;
 for (i = 0; i < COUNT; i++) {
 snowflake = snowflakes[i];
 snowflake.y += snowflake.vy;
 snowflake.x += snowflake.vx;
 ctx.globalAlpha = snowflake.o;
 ctx.beginPath();
 ctx.arc(snowflake.x, snowflake.y, snowflake.r, 0, Math.PI * 2, false);
 ctx.closePath();
 ctx.fill();
 if (snowflake.y > height) {
 snowflake.reset();
 }
 }
 requestAnimFrame(update);
 }
 // shim layer with setTimeout fallback
 window.requestAnimFrame = (function(){
 return window.requestAnimationFrame ||
 window.webkitRequestAnimationFrame ||
 window.mozRequestAnimationFrame ||
 function( callback ){
 window.setTimeout(callback, 1000 / 60);
 };
 })();
 onResize();
 window.addEventListener('resize', onResize, false);
 masthead.appendChild(canvas);
 })();
</script></body></html>

使用本站HTML/CSS/JS在線運行測試工具：http://tools.jb51.net/code/HtmlJsRun，可得到如下測試運行效果：