我正在处理一个高度600
为 101000
像素、宽度为几十或几十万像素的画布元素。但是,经过一定数量的像素(显然未知)后,画布不再显示我用 JS 绘制的形状。
有谁知道有限制吗?
在 Chrome 12 和 Firefox 4 中测试。
我正在处理一个高度600
为 101000
像素、宽度为几十或几十万像素的画布元素。但是,经过一定数量的像素(显然未知)后,画布不再显示我用 JS 绘制的形状。
有谁知道有限制吗?
在 Chrome 12 和 Firefox 4 中测试。
2014 年 10 月 13 日更新
所有经过测试的浏览器都对画布元素的高度/宽度有限制,但许多浏览器也限制了画布元素的总面积。我能够测试的浏览器的限制如下:
最大高度/宽度:32,767 像素
最大区域:268,435,456 像素(例如,16,384 x 16,384)
最大高度/宽度:32,767 像素
最大区域:472,907,776 像素(例如,22,528 x 20,992)
最大高度/宽度:8,192 像素
最大面积:不适用
最大高度/宽度:4,096 像素
最大面积:不适用
我目前无法测试其他浏览器。有关其他限制,请参阅此页面上的其他答案。
在大多数浏览器上超过最大长度/宽度/面积会使画布无法使用。(它将忽略任何绘制命令,即使在可用区域中也是如此。)IE 和 IE Mobile 将接受可用空间内的所有绘制命令。
接受的答案已过时且不完整。
浏览器施加不同的画布大小限制,但这些限制通常会根据可用的平台和硬件而变化。这使得它很难做出声明,如“最大的canvas[area/height/width]
的[browser]
是[value]
”因为[value]
可以改变基于该操作系统,可用RAM,或GPU类型。
有两种处理大型 HTML<canvas>
元素的方法:
那些希望以编程方式确定客户端画布限制的人应该考虑使用canvas-size。
从文档:
HTML canvas 元素受到现代浏览器和旧浏览器的广泛支持,但每个浏览器和平台组合都施加了独特的大小限制,超过时会使画布无法使用。不幸的是,浏览器没有提供一种方法来确定它们的限制是什么,也没有在创建了无法使用的画布后提供任何类型的反馈。这使得处理大型画布元素成为一项挑战,尤其是对于支持各种浏览器和平台的应用程序。
这个微型库提供了浏览器支持的 HTML 画布元素的最大面积、高度和宽度,以及测试自定义画布尺寸的能力。通过在创建新画布元素之前收集此信息,应用程序能够在每个浏览器/平台的大小限制内可靠地设置画布尺寸。
此处提供了各种平台和浏览器组合的测试结果:
完全公开,我是图书馆的作者。我在 2014 年创建了它,最近重新审视了一个新的与画布相关的项目的代码。我很惊讶地发现 2018 年同样缺乏用于检测画布大小限制的可用工具,因此我更新了代码,发布了它,并希望它可以帮助其他人遇到类似问题。
我在 Firefox 上遇到了画布高度大于 8000 的内存不足错误,chrome 似乎处理得更高,至少到 32000。
编辑:运行更多测试后,我发现 Firefox 16.0.2 出现了一些非常奇怪的错误。
首先,我似乎从内存中(在 javascript 中创建)画布中获得了不同的行为,而不是 html 声明的画布。
其次,如果您没有正确的 html 标签和元字符集,画布可能会被限制为 8196,否则您可以达到 32767。
第三,如果您获得画布的 2d 上下文,然后更改画布大小,您也可能会被限制为 8196。在获取 2d 上下文之前简单地设置画布大小允许您拥有多达 32767 个而不会出现内存错误。
我无法始终如一地获得内存错误,有时它仅在第一页加载时出现,然后随后的高度更改起作用。这是我用http://pastebin.com/zK8nZxdE测试的 html 文件。
iOS 最大画布尺寸(宽 x 高):
iPod Touch 16GB = 1448x1448
iPad Mini = 2290x2289
iPhone 3 = 1448x1448
iPhone 5 = 2290x2289
2014 年 3 月测试。
对@FredericCharette 的回答进行一些扩展:根据“了解 iOS 资源限制”部分下的safari 内容指南:
对于内存小于 256 MB 的设备,画布元素的最大大小为 3 兆像素,对于内存大于或等于 256 MB 的设备,最大大小为 5 兆像素
因此,5242880 (5 x 1024 x 1024) 像素的任何大小变化都适用于大内存设备,否则为 3145728 像素。
5 兆像素画布示例(宽 x 高):
Any total <= 5242880
--------------------
5 x 1048576 ~= 5MP (1048576 = 1024 x 1024)
50 x 104857 ~= 5MP
500 x 10485 ~= 5MP
等等..
最大的 SQUARE 画布是(“MiB”= 1024x1024 字节):
device < 256 MiB device >= 256 MiB iPhone 6 [not confirmed]
----------------- ----------------- ---------------------
<= 3145728 pixels <= 5242880 pixels <= 16 x 1024 x 1024 p
1773 x 1773 2289 x 2289 4096 x 4096