JavaScript，1個圖像而不是很多

我的任務是讓圖片像輸入的速度和密度一樣降雪效果。我的問題是，我不能讓多個圖像出現，只有一個會出現，而且不是連續的。JavaScript，1個圖像而不是很多

window.onload = function(){ 
 

 
\t var button = document.getElementById("button"), 
 
\t \t myTimer; 
 

 
\t button.onclick = function(){ 
 
\t \t //create canvas 
 
\t \t clearInterval(myTimer); 
 
\t \t var canvas = document.getElementById("sky"); 
 
\t \t var ctx = canvas.getContext("2d"); 
 
\t \t //set canvas fullscreen 
 
\t \t var W = window.innerWidth; 
 
\t \t var H = window.innerHeight; 
 
\t \t canvas.height = H; 
 
\t \t canvas.width = W; 
 
\t \t //generate snowflakes and atts 
 
\t \t var mf = 100; //max flakes 
 
\t \t var flakes = []; 
 
\t \t var velocity = document.getElementById("vel").value; 
 
\t \t var density = document.getElementById("dens").value; 
 

 
\t \t for(var i = 0; i < mf; i++){ 
 
\t \t \t flakes.push({ 
 
\t \t \t \t x: Math.random()*W, 
 
\t \t \t \t y: Math.random()*H, 
 
\t \t \t \t r: Math.random()*density + 2, 
 
\t \t \t \t d: Math.random() + velocity 
 
\t \t \t }) 
 
\t \t } 
 
\t \t //draw flakes 
 
\t \t function drawFlakes(){ 
 
\t \t \t ctx.clearRect(0, 0, W, H); 
 
\t \t \t ctx.fillStyle = "White"; 
 
\t \t \t ctx.beginPath(); 
 
\t \t \t for(var i = 0; i < mf; i++){ 
 
\t \t \t \t var f = flakes[i]; 
 
\t \t \t \t // ctx.moveTo(f.x, f.y); 
 
\t \t \t \t // ctx.arc(f.x, f.y, f.r, 0, Math.PI*2, true); 
 
\t \t \t \t var base_image = new Image(); 
 
     base_image.src = 'assume its a cat png source is on my pc'; 
 
\t \t \t \t base_image.onload = function(){ 
 
\t \t \t \t \t ctx.drawImage(base_image, f.x, f.y, f.r + 50, f.r + 50); 
 
\t \t \t \t }; \t \t 
 
\t \t \t } 
 
\t \t \t ctx.fill(); 
 
\t \t \t moveFlakes(); 
 
\t \t } 
 
\t \t var angle = 0; 
 
\t \t 
 
\t \t //move flakes 
 
\t \t function moveFlakes(){ 
 
\t \t \t angle += 0.01; 
 
\t \t \t for(var i = 0; i < mf; i++){ 
 
\t \t \t \t var f = flakes[i]; 
 
\t \t \t \t f.y += Math.pow(f.d, 2) + 1; 
 
\t \t \t \t f.x += Math.sin(angle)*2; 
 
\t \t \t \t 
 
\t \t \t \t if(f.y > H){ 
 
\t \t \t \t \t flakes[i] = {x: Math.random()*W, y: 0, r: f.r, d: f.d}; 
 
\t \t \t \t } 
 
\t \t \t \t // var base_image = new Image(); 
 
    \t \t \t \t // base_image.src = 'Cat.png'; 
 
\t \t \t \t // base_image.onload = function(){ 
 
\t \t \t \t // \t ctx.drawImage(base_image, f.x, f.y, f.r + 50, f.r + 50); 
 
\t \t \t \t // }; 
 
\t \t \t \t // I commented this section as I don't know if it's neccessary yet. 
 

 
\t \t \t } 
 
\t \t } \t 
 
\t \t myTimer = setInterval(drawFlakes, 25); 
 
\t }; 
 
};

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <script src="snow.js"></script> 
 
     <!--<script src="picture-fall.js"></script>--> 
 
     </script> 
 
     <style> 
 
      body { 
 
       background: #102a54; 
 
      } 
 
     </style>   
 
    </head> 
 
    <body> 
 
     <form> 
 
      <input id="vel" type="text" value="1"> 
 
      <input id="dens" type="text" value="7"> 
 
      <input id="button" type="button" value="Fall!"> 
 
     </form> 
 
     <canvas id="sky"></canvas> 
 

 
    </body> 
 
</html>

我已經嘗試了不同的形式給出，我畫的圖片，如果我不使用來自片對象的數據和它的工作，雖然我不知道如何設置它們的動畫。

window.onload = function(){ 
 
    var button = document.getElementById("button"), 
 
\t \t myTimer; 
 

 
\t button.onclick = function(){ 
 
     clearInterval(myTimer); 
 
     var canvas = document.getElementById("sky"); 
 
     var ctx = canvas.getContext("2d"); 
 

 
     var W = window.innerWidth; 
 
     var H = window.innerHeight; 
 
     canvas.height = H; 
 
     canvas.width = W; 
 

 
     var mp = 100, //max pictures 
 
      flakes = []; 
 
     var velocity = document.getElementById("vel").value; 
 
     var density = document.getElementById("dens").value; 
 

 
     for(var i = 0; i < mp; i++){ 
 
\t \t \t flakes.push({ 
 
\t \t \t \t x: Math.random()*W, 
 
\t \t \t \t y: Math.random()*H, 
 
\t \t \t \t r: Math.random()*density + 2, 
 
\t \t \t \t d: Math.random() + velocity 
 
\t \t \t }) 
 
\t \t } 
 

 
     function drawPictures(){ 
 
      ctx.clearRect(0, 0, W, H); 
 
      ctx.fillStyle = "White"; 
 
      ctx.beginPath(); 
 
      for(var i = 0; i < mp; i++){ 
 
       // var f = flakes[i]; 
 
       var base_image = new Image(); 
 
       base_image.src = 'snowflake.png'; 
 
       base_image.onload = function(){ 
 
        ctx.drawImage(base_image, Math.random()*W, 
 
\t \t \t \t   Math.random()*H, 
 
\t \t \t \t   Math.random()*density + 50, 
 
\t \t \t \t   Math.random()*density + 50) 
 
       }; \t \t 
 
      } 
 
      ctx.fill(); 
 
      // movePictures(); 
 
     } 
 
     var angle = 0; \t 
 
     //move flakes 
 
     function movePictures(){ 
 
      angle += 0.01; 
 
      for(var i = 0; i < mp; i++){ 
 
       var f = flakes[i]; 
 
       f.y += Math.pow(f.d, 2) + 1; 
 
       f.x += Math.sin(angle)*2; 
 
        
 
       if(f.y > H){ 
 
        flakes[i] = {x: Math.random()*W, y: 0, r: f.r, d: f.d}; 
 
       } 
 
      } 
 
     } \t 
 
     myTimer = setInterval(drawPictures, 1000); 
 
    }; 
 
};

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <script src="snow.js"></script> 
 
     <!--<script src="picture-fall.js"></script>--> 
 
     </script> 
 
     <style> 
 
      body { 
 
       background: #102a54; 
 
      } 
 
     </style>   
 
    </head> 
 
    <body> 
 
     <form> 
 
      <input id="vel" type="text" value="1"> 
 
      <input id="dens" type="text" value="7"> 
 
      <input id="button" type="button" value="Fall!"> 
 
     </form> 
 
     <canvas id="sky"></canvas> 
 

 
    </body> 
 
</html>

還有，爲什麼如果我改變了輸入速度，而且實際上並沒有做什麼嗎？

來源

2017-05-07 Moloce Adrian

可能的原因可能是，您正在爲每個片狀對象創建和加載圖像，而您不需要這樣做。只需創建一次圖像對象，然後在畫布上繪製，並使用片狀對象座標。

嘗試改變如下：

var base_image = new Image(); 
    base_image.src = 'http://www.clipartkid.com/images/842/image-frozen-elsas-snowflake-png-disney-wiki-bSYAsR-clipart.png'; 
    //draw flakes 
    function drawFlakes(){ 
     ctx.clearRect(0, 0, W, H); 
     ctx.fillStyle = "White"; 
     ctx.beginPath(); 
     for(var i = 0; i < mf; i++){ 
      var f = flakes[i]; 
      // ctx.moveTo(f.x, f.y); 
      // ctx.arc(f.x, f.y, f.r, 0, Math.PI*2, true);    
      ctx.drawImage(base_image, f.x, f.y, f.r + 50, f.r + 50);  
     } 
     ctx.fill(); 
     moveFlakes(); 
    }

更換你的形象

來源

2017-05-07 13:51:29

我已經花了幾個小時就這一點，我的頭好痛，你的救星！非常感謝！ –

我的榮幸.. :) –

@MoloceAdrian歡迎來到Stack Overflow。如果此答案或任何其他人解決了您的問題，請將其標記爲已接受。 –

JavaScript，1個圖像而不是很多

回答

相關問題