JavaScriptの代わりに1画像多く

私の仕事は、入力として与えられたスピードと密度でスノー効果のような画像を落とすことです。私の問題は、私は複数の画像を表示することはできませんが、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>

私はそれらをアニメーション化する方法を知りませんが、私はフレークオブジェクトからのデータを使用していないし、それが動作しない場合、私は画像を描く異なるaproachを試してみました。

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はスタックオーバーフローを歓迎します。この回答または他の誰かがあなたの問題を解決した場合は、それを合格とマークしてください。 –

JavaScriptの代わりに1画像多く

答えて

関連する問題