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

和这个 javascript

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);

            }
        };