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);
    
                }
            };
    
    点赞 评论 复制链接分享