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

来源：互联网发布：飞歌开拓者3端口编辑：程序博客网时间：2024/05/04 19:30

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

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

0 0