畫布雪動畫不起作用
[英]Canvas Snow Animation does not work
問題描述
所以是一個季節特定的問題。 我做了一個基本的動畫來模擬一些雪。 問題在於，雪只落一次，之后屏幕保持黑屏。 我遵循了將所有內容放入window.onload（）的教程。 這對我來說似乎不是很好的風格，所以這是我想到的：
let sky, ctx; let W, H; const maxSnow = 250; const snow = []; function init(){ sky = document.getElementById("sky"); ctx = sky.getContext("2d"); sky.width = W = window.innerWidth; sky.height = H = window.innerHeight; for(let i = 0; i < maxSnow; i++) { snow.push({ x: Math.random()*W, //x-coordinate y: -50, //y-coordinate radius: Math.random()*4+1, //radius density: Math.random()*maxSnow //density }) } } function draw() { ctx.clearRect(0, 0, W, H); ctx.fillStyle = "rgba(255, 255, 255, 0.8)"; ctx.beginPath(); for(let i = 0; i < maxSnow; i++) { var flake = snow[i]; ctx.moveTo(flake.x, flake.y); ctx.arc(flake.x, flake.y, flake.radius, 0, Math.PI*2, true); } ctx.fill(); update(); } //Function to move the snowflakes //angle will be an ongoing incremental flag. Sin and Cos functions will be applied to it to create vertical and horizontal movements of the flakes var angle = 0; function update() { angle += 0.01; for(var i = 0; i < maxSnow; i++) { var p = snow[i]; //Updating X and Y coordinates //We will add 1 to the cos function to prevent negative values which will lead flakes to move upwards //Every particle has its own density which can be used to make the downward movement different for each flake //Lets make it more random by adding in the radius py += Math.cos(angle+p.density) + 1 + p.radius/2; px += Math.sin(angle) * 2; //Sending flakes back from the top when it exits //Lets make it a bit more organic and let flakes enter from the left and right also. if(px > W+5 || px < -5 || py > H) { if(i%3 > 0) //66.67% of the flakes { snow[i] = {x: Math.random()*W, y: -10, r: p.radius, d: p.density}; } else { //If the flake is exitting from the right if(Math.sin(angle) > 0) { //Enter from the left snow[i] = {x: -5, y: Math.random()*H, r: p.radius, d: p.density}; } else { //Enter from the right snow[i] = {x: W+5, y: Math.random()*H, r: p.radius, d: p.density}; } } } } } window.onload = function(){ init(); //animation loop setInterval(draw, 33); } window.addEventListener('resize', function(){ sky.width = W = window.innerWidth; sky.height = H = window.innerHeight; }, false);
* { margin: 0; padding: 0; } body { overflow: hidden; background-color: rgba(0, 0, 0, 1); }
<html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <canvas id="sky"></canvas> <script src="snow.js"></script> </body> </html>
有人看到問題出在哪里，為什么粒子只掉一次呢？ 謝謝。
1 個解決方案
解決方案1
3 已采納 2017-12-07 18:27:07
這是因為當雪花離開屏幕時，會將它們重置為錯誤的對象。
您的原始對象（以及所有方法）期望x ， y ， radius和density
但是，當您更新對象時，會創建x ， y ， r和d 。
如果將r和d重命名為正確的名稱，則可以使用。
let sky, ctx; let W, H; const maxSnow = 250; const snow = []; function init(){ sky = document.getElementById("sky"); ctx = sky.getContext("2d"); sky.width = W = window.innerWidth; sky.height = H = window.innerHeight; for(let i = 0; i < maxSnow; i++) { snow.push({ x: Math.random()*W, //x-coordinate y: -50, //y-coordinate radius: Math.random()*4+1, //radius density: Math.random()*maxSnow //density }) } } function draw() { ctx.clearRect(0, 0, W, H); ctx.fillStyle = "rgba(255, 255, 255, 0.8)"; ctx.beginPath(); for(let i = 0; i < maxSnow; i++) { var flake = snow[i]; ctx.moveTo(flake.x, flake.y); ctx.arc(flake.x, flake.y, flake.radius, 0, Math.PI*2, true); } ctx.fill(); update(); } //Function to move the snowflakes //angle will be an ongoing incremental flag. Sin and Cos functions will be applied to it to create vertical and horizontal movements of the flakes var angle = 0; function update() { angle += 0.01; for(var i = 0; i < maxSnow; i++) { var p = snow[i]; //Updating X and Y coordinates //We will add 1 to the cos function to prevent negative values which will lead flakes to move upwards //Every particle has its own density which can be used to make the downward movement different for each flake //Lets make it more random by adding in the radius py += Math.cos(angle+p.density) + 1 + p.radius/2; px += Math.sin(angle) * 2; //Sending flakes back from the top when it exits //Lets make it a bit more organic and let flakes enter from the left and right also. if(px > W+5 || px < -5 || py > H) { if(i%3 > 0) //66.67% of the flakes { snow[i] = {x: Math.random()*W, y: -10, radius: p.radius, density: p.density}; } else { //If the flake is exitting from the right if(Math.sin(angle) > 0) { //Enter from the left snow[i] = {x: -5, y: Math.random()*H, radius: p.radius, density: p.density}; } else { //Enter from the right snow[i] = {x: W+5, y: Math.random()*H, radius: p.radius, density: p.density}; } } } } } window.onload = function(){ init(); //animation loop setInterval(draw, 33); } window.addEventListener('resize', function(){ sky.width = W = window.innerWidth; sky.height = H = window.innerHeight; }, false);
* { margin: 0; padding: 0; } body { overflow: hidden; background-color: rgba(0, 0, 0, 1); }
<html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <canvas id="sky"></canvas> <script src="snow.js"></script> </body> </html>
如何在JavaScript和Canvas動畫中添加多個彩色雪球
[英]How to add multiple color snow-balls in javascript & canvas animation
為什么 html 畫布線條動畫可以工作，但在已經畫了一條線之后不行
[英]Why does html canvas line animation work but not after already drawing a line
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.