Dieses Mal zeige ich Ihnen, wie Sie mit JS eine Schneeflocken-Animation erstellen. Was sind die Vorsichtsmaßnahmen für die Erstellung einer Schneeflocken-Animation mit 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>Verwenden Sie diese WebsiteHTML/CSS/JS Online-Lauftest-Tool: http://tools.jb51.net/code/HtmlJsRun, Sie können das bekommen Folgender Testbetriebseffekt:
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zu PHP Chinesische Website!
Empfohlene Lektüre:
Vue.js bidirektionale Bindungsimplementierungsschrittanweisungen
Vue+canvas implementiert ein mobiles Handschriftbrett Detaillierte Erklärung der Schritte
Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine Schneeflocken-Animation in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
