HTML5の複数のキャンバス

Question

私はこのPHPコード

@for($i=1;$i<=$cate;$i++) 
    <div class="row"> 
     <div class="col-lg-12 col-md-12 col-sm-12" style="min-height: 412px" id="etalon"> 
      <canvas id="respondCanvas_{{$i}}" class="respondCanvas" style="position: absolute"></canvas> 
      <div class="col-md-2"><h3> 

        </h3></div> 
     </div> 
    </div> 
    <!-- /.row --> 
    @endfor 

このjavascritp

var imageObj = new Image(); 
    imageObj.src = "/frontEnd/images/coupons/back1.png"; 


    for (var i=1;i<=2;i++) { 
     var canvas = document.getElementById("respondCanvas_"+i); 
     alert(i); 
     var context = canvas.getContext('2d'); 

     imageObj.onload = function() { 
      context.drawImage(imageObj, 0, 0); 
     }; 

    } 

を持っています。 誰でも助けてくれますか？ ありがとう

Answer 1

私はそれを解決することができました！とにかくありがとう ！

$(document).ready(function(){ 
     var count = document.getElementsByClassName('respondCanvas').length; 

    var imageObj = new Image(); 
    imageObj.src = "/frontEnd/images/coupons/back1.png"; 
     var canvas = new Array(); 
     var context = new Array(); 

     for (var i=1;i<=count;i++) { 
     canvas[i] = document.getElementById("respondCanvas_"+i); 


     context[i] = canvas[i].getContext('2d'); 



    } 
     imageObj.onload = function() { 
      for (var i=1;i<=count;i++) { 
       context[i].drawImage(imageObj, 0, 0); 

      } 
     };