<canvas>元素的最大大小铬:火狐浏览器:即:IE移动版:其他:
我正在使用一个画布元素,其高度为像素,宽度为几万或数十万像素。但是,在一定数量的像素(显然未知)之后,画布不再显示我用JS绘制的形状。600
1000
有谁知道是否有限制?
在 Chrome 12 和 Firefox 4 中都经过了测试。
我正在使用一个画布元素,其高度为像素,宽度为几万或数十万像素。但是,在一定数量的像素(显然未知)之后,画布不再显示我用JS绘制的形状。600
1000
有谁知道是否有限制?
在 Chrome 12 和 Firefox 4 中都经过了测试。
更新 10/13/2014
所有测试的浏览器都对画布元素的高度/宽度有限制,但许多浏览器也限制了画布元素的总面积。对于我能够测试的浏览器,限制如下:
最大高度/宽度:32,767 像素
最大区域:268,435,456 像素(例如,16,384 x 16,384)
最大高度/宽度:32,767 像素
最大区域:472,907,776 像素(例如,22,528 x 20,992)
最大高度/宽度:8,192像素
最大区域:N/A
最大高度/宽度:4,096 像素
最大区域:不适用
我目前无法测试其他浏览器。有关其他限制,请参阅此页面上的其他答案。
在大多数浏览器上,超过最大长度/宽度/面积会使画布不可用。(它将忽略任何绘制命令,即使在可用区域中也是如此。IE 和 IE Mobile 将遵守可用空间内的所有绘制命令。
接受的答案已经过时且不完整。
浏览器施加了不同的画布大小限制,但这些限制通常会根据可用的平台和硬件而变化。这使得很难做出像“的最大画布是”这样的语句,因为可以根据操作系统,可用RAM或GPU类型进行更改。[area/height/width]
[browser]
[value]
[value]
有两种方法可以处理大型 HTML 元素:<canvas>
那些希望以编程方式确定客户端上的画布限制的用户应考虑使用画布大小。
从文档中:
现代和旧版浏览器广泛支持 HTML 画布元素,但每个浏览器和平台组合都施加了唯一的大小限制,这些限制将使画布在超出时无法使用。不幸的是,浏览器没有提供一种方法来确定它们的局限性是什么,也没有在创建不可用的画布后提供任何类型的反馈。这使得使用大型画布元素成为一项挑战,特别是对于支持各种浏览器和平台的应用程序。
此微库提供浏览器支持的 HTML 画布元素的最大面积、高度和宽度,以及测试自定义画布尺寸的功能。通过在创建新的 canvas 元素之前收集此信息,应用程序能够在每个浏览器/平台的大小限制内可靠地设置 canvas 尺寸。
此处提供了各种平台和浏览器组合的测试结果:
完全披露,我是图书馆的作者。我在2014年创建了它,最近重新访问了一个新的画布相关项目的代码。我很惊讶地发现在2018年同样缺乏用于检测画布大小限制的可用工具,所以我更新了代码,发布了它,并希望它能帮助其他遇到类似问题的人。