dotibrb048760
dotibrb048760
2016-03-29 13:19

Html5多个画布，一页上有图像

已采纳

i have this php code

 @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

and this 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);
        };

    }

i want to create dynamic rows an each of them to have it's canvas. Can anyone help me? Thanks

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • dongnuoyi8833 dongnuoyi8833 5年前

    I have managed to solve it ! Thanks anyway !

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

            }
        };
    点赞 评论 复制链接分享
提交

为你推荐