

下記のサイトを参考に、落ち葉を降らせるアニメーションを製作中です。

[Canvasで桜を降らせてみました |
株式会社オーツー｜スタッフブログ](https://www.otwo.jp/blog/canvas_sakura/)

このサイトの例に習って、１種類の落ち葉を動かすことはできたのですが、  
更に、いくつかの別々の葉っぱの画像をランダムに表示させたいと思っています。

例）leaf1.svg,leaf2.svg,leaf3.svg  
（サイトの例では、１つの画像を仕様）

現状のコードは以下のとおりです。

・参考サイトにある「雲の動き」などは使わないので省いてあります  
・キャンバスサイズの指定など少し修正しています。

[code]

    var canvas = document.getElementById("canvas");
    var container = document.getElementById('canvas_wrap');
    var ctx = canvas.getContext("2d");
    sizing();
    var imgCnt = 15;
    var aryImg = [];
    var aryCloud = [];
    var cvsw = $(window).width();
    var cvsh = $(window).height();
    var imgBaseSizeW = 15;
    var imgBaseSizeH = 20;
    var aspectMax = 2;
    var aspectMin = 1;
    var speedMax = 4;
    var speedMin = 2;
    var angleAdd = 100;
    var wind = 200;
    var newWind = 20;
    var windMax = 10;
    var windMin = 5;
    var img = new Image();
    img.src = "resource/images/common/leaf.svg";
    img.onload = flow_start;
    
    function sizing() {
        canvas.height = container.offsetHeight;
        canvas.width = container.offsetWidth;
    }
    
    
    function setImagas(){
      var aspect = 0;
      for(var i = 0;i < imgCnt;i++){
         aspect = Math.random()*(aspectMax-aspectMin)+aspectMin;
        aryImg.push({
          "posx": Math.random()*cvsw,
          "posy": Math.random()*cvsh,
          "sizew": imgBaseSizeW*aspect,
          "sizeh": imgBaseSizeH*aspect,
          "speedy": Math.random()*(speedMax-speedMin)+speedMin,
          "angle": Math.random()*360,
        });
      }
    }
    
    var idx = 0;
    var idxc = 0;
    var cos = 0;
    var sin = 0;
    var rad = Math.PI / 180;
    
    function flow(){
      ctx.clearRect(0,0,cvsw,cvsh);
      for(idx = 0;idx < imgCnt;idx++){
        aryImg[idx].posx += wind/aryImg[idx].sizew;
        aryImg[idx].posy += aryImg[idx].speedy;
        (idx%2) ? aryImg[idx].angle += 1 : aryImg[idx].angle -= 1;
        cos = Math.cos(aryImg[idx].angle * rad);
        sin = Math.sin(aryImg[idx].angle * rad);
        ctx.setTransform(cos, sin, sin, cos, aryImg[idx].posx, aryImg[idx].posy);
        ctx.drawImage(img, 0, 0 , aryImg[idx].sizew , aryImg[idx].sizeh);
        ctx.setTransform(1, 0, 0, 1, 0, 0);
        if(aryImg[idx].posy >= cvsh){
          aryImg[idx].posy = -aryImg[idx].sizeh;
          if(imgCnt < idx){
            aryImg.splice(idx, 1);
          }
        }
        if(aryImg[idx].posx >= cvsw){
          aryImg[idx].posx = -aryImg[idx].sizew;
          if(imgCnt < idx){
            aryImg.splice(idx, 1);
          }
        }
      }
    }
    
    function windowChange(){
      newWind = Math.random()*(windMax-windMin)+windMin;
      setInterval(function(){
        if(newWind != wind){
          (newWind > wind) ? wind += 0 : wind -= 0;
        }
      },100);
    }
    
    function flow_start(){
      setImagas();
      setInterval(flow,10);
    }
    
[/code]

**調べたりやってみたこと**

画像の指定部分は

[code]

    img.src = "resource/images/common/leaf.svg";
    
[/code]

canvasで画像の描画部分は、

[code]

    ctx.drawImage(img, 0, 0 , aryImg[idx].sizew , aryImg[idx].sizeh);
    
[/code]

だと思うので、ここの変数imgを配列を使ったり、Math.randomとかで何かするのかなぁと思ったのですが、うまくいきません。  
どうしたら実現できるのかお教えください。よろしくお願いいたします。


CC BY-SA 4.0
2019-09-11T10:30:55.757
58992
2020-09-09T14:07:20.690
35823
question
javascript html5-canvas
canvas内に複数の画像をランダムに散らす


drawImage で img から画像を描画しているので、やり方はあっていると思います。  
img を配列にできているのであれば、以下の様にすれば、いろいろな画像を使って描画できます。

`ctx.drawImage(img[idx % img.length], 0, 0 , aryImg[idx].sizew ,
aryImg[idx].sizeh);`

ランダムに画像を使いたい場合は、img の配列を作るときにランダムにするのが良い気がします。

[code]

    var canvas = document.getElementById("canvas");
    var container = document.getElementById('canvas_wrap');
    var ctx = canvas.getContext("2d");
    sizing();
    var imgCnt = 15;
    var aryImg = [];
    var aryCloud = [];
    var cvsw = $(window).width();
    var cvsh = $(window).height();
    var imgBaseSizeW = 15;
    var imgBaseSizeH = 20;
    var aspectMax = 2;
    var aspectMin = 1;
    var speedMax = 4;
    var speedMin = 2;
    var angleAdd = 100;
    var wind = 200;
    var newWind = 20;
    var windMax = 10;
    var windMin = 5;
    
    var leafImages = [];
    function addLeafImages(filename) {
      var img = new Image();
      img.src = filename;
      img.onload = flow_start;
      leafImages.push(img);
    }
    addLeafImages("https://upload.wikimedia.org/wikipedia/commons/a/a8/Cannabis_leaf.svg");
    addLeafImages("https://upload.wikimedia.org/wikipedia/commons/f/fd/Maple_Leaf.svg");
    
    function sizing() {
        canvas.height = container.offsetHeight;
        canvas.width = container.offsetWidth;
    }
    
    
    function setImagas(){
      var aspect = 0;
      for(var i = 0;i < imgCnt;i++){
         aspect = Math.random()*(aspectMax-aspectMin)+aspectMin;
        aryImg.push({
          "posx": Math.random()*cvsw,
          "posy": Math.random()*cvsh,
          "sizew": imgBaseSizeW*aspect,
          "sizeh": imgBaseSizeH*aspect,
          "speedy": Math.random()*(speedMax-speedMin)+speedMin,
          "angle": Math.random()*360,
        });
      }
    }
    
    var idx = 0;
    var idxc = 0;
    var cos = 0;
    var sin = 0;
    var rad = Math.PI / 180;
    
    function flow(){
      ctx.clearRect(0,0,cvsw,cvsh);
      for(idx = 0;idx < imgCnt;idx++){
        aryImg[idx].posx += wind/aryImg[idx].sizew;
        aryImg[idx].posy += aryImg[idx].speedy;
        (idx%2) ? aryImg[idx].angle += 1 : aryImg[idx].angle -= 1;
        cos = Math.cos(aryImg[idx].angle * rad);
        sin = Math.sin(aryImg[idx].angle * rad);
        ctx.setTransform(cos, sin, sin, cos, aryImg[idx].posx, aryImg[idx].posy);
        ctx.drawImage(leafImages[idx % leafImages.length], 0, 0 , aryImg[idx].sizew , aryImg[idx].sizeh);
        ctx.setTransform(1, 0, 0, 1, 0, 0);
        if(aryImg[idx].posy >= cvsh){
          aryImg[idx].posy = -aryImg[idx].sizeh;
          if(imgCnt < idx){
            aryImg.splice(idx, 1);
          }
        }
        if(aryImg[idx].posx >= cvsw){
          aryImg[idx].posx = -aryImg[idx].sizew;
          if(imgCnt < idx){
            aryImg.splice(idx, 1);
          }
        }
      }
    }
    
    function windowChange(){
      newWind = Math.random()*(windMax-windMin)+windMin;
      setInterval(function(){
        if(newWind != wind){
          (newWind > wind) ? wind += 0 : wind -= 0;
        }
      },100);
    }
    
    var flowStartCount = 0;
    function flow_start(){
      flowStartCount += 1;
      if (leafImages.length <= flowStartCount) {
        setImagas();
        setInterval(flow,10);
      }
    }
[/code]

[code]

        #canvas_wrap {
           background-color: #000;
           width: 500px;
           height: 200px;
        }
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="canvas_wrap">
    <canvas id="canvas"></canvas>
    </div>
[/code]


CC BY-SA 4.0
2019-10-09T13:53:39.913
59603
2019-10-09T13:58:58.400
2019-10-09T13:58:58.400
4419
4419
58992
answer