canvas在不同浏览器中高度限制问题

最新推荐文章于 2023-11-23 22:40:32 发布

原创最新推荐文章于 2023-11-23 22:40:32 发布 · 4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML5 #canvas #浏览器

前端专栏收录该内容

2 篇文章

订阅专栏

最近遇上项目上有一个绘制大尺寸表格的问题，产品中封装的表格控件在支持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，超过高度限制，整个画布在浏览器上无法渲染。

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