Html5 多画布与一页上的图像答案

【问题标题】：Html5 multiple canvas with image on one pageHtml5 多画布与一页上的图像
【发布时间】：2016-07-17 01:56:25
【问题描述】：

我有这个 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);
        };

    }

我想为每个动态行创建画布。谁能帮我？谢谢

【问题讨论】：

标签： javascript php html canvas

【解决方案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);

            }
        };

【讨论】：