admin管理员组

文章数量:1530026

最近遇上项目上有一个绘制大尺寸表格的问题，产品中封装的表格控件在支持HTML5的浏览器上采用画布展示，但是绘制的行数过多后发现展示不全的问题，经过查阅资料和写demo测试，发现主流浏览器对canvas的尺寸做了一定的限制。

测试代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
  </head>
  <body>
    <canvas id="a_canvas" width="300" height="8192"></canvas>

    <script type="text/javascript">
      (function (){

        window.addEventListener("load", function(){


          var a_canvas = document.getElementById('a_canvas');
          var context = a_canvas.getContext("2d");


          var gradient = context.createLinearGradient(0,0,0,300);

          gradient.addColorStop(0,"#e0e0e0");
          gradient.addColorStop(1,"#ffffff");


          context.fillStyle = gradient;

          context.fillRect(0,0,a_canvas.width,a_canvas.height);

          var grid_cols = 10;
          var grid_rows = 400;
          var cell_height = a_canvas.height / grid_rows;
          var cell_width = a_canvas.width / grid_cols;
          context.lineWidth = 1;
          context.strokeStyle = "#a0a0a0";


          context.beginPath();

          for (var col = 0; col <= grid_cols; col++) {
            var x = col * cell_width;
            context.moveTo(x,0);
            context.lineTo(x,a_canvas.height);
          }

          for(var row = 0; row <= grid_rows; row++){
            var y = row * cell_height;
            context.moveTo(0,y);
            context.lineTo(a_canvas.width, y);
          }
          context.stroke();
        },false);
      })();
    </script>
  </body>
经过测试发现IE9将画布的高度限制在8192px，既2的13次幂，但是这个限制貌似会受到电脑硬件的影响，如果电脑配置足够高，IE的高度限制也会增高，超过规定的高度限制，超过的部分在IE9上无法渲染。

chrome55.0.2868.3和firefox49.0.2都将canvas的高度限制在32767px，2的15次幂减1，超过高度限制，整个画布在浏览器上无法渲染。

测试结果只针对我本地的环境，如果有错误的地方，欢迎指正。


本文标签： 器中高度canvas

版权声明：本文标题：canvas在不同浏览器中高度限制问题 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1726624324a1078596.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。