ser*_*dev 104 javascript html5 canvas
我正在使用一个画布元素,其高度600为1000像素,宽度为几十或几十万像素.然而,在一定数量的像素(显然未知)之后,画布不再显示我用JS绘制的形状.
有谁知道是否有限制？
在Chrome 12和Firefox 4中都进行了测试.
Bra*_*ano 109
更新于2014/10/13
所有经过测试的浏览器都限制了canvas元素的高度/宽度,但许多浏览器也限制了canvas元素的总面积.对于我能够测试的浏览器,限制如下:
最大高度/宽度: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像素
最大面积:N/A.
我目前无法测试其他浏览器.有关其他限制,请参阅此页面上的其他答案.
超过大多数浏览器的最大长度/宽度/区域会使画布无法使用.(它将忽略任何绘制命令,即使在可用区域中也是如此.)IE和IE Mobile将遵循可用空间内的所有绘制命令.
Ben*_*ett 16
我在Firefox上遇到内存不足错误,画布高度超过8000,Chrome似乎处理得更高,至少达到32000.
编辑:经过一些更多的测试,我发现Firefox 16.0.2有一些非常奇怪的错误.
首先,我似乎从内存(在javascript中创建)画布获得了不同的行为,而不是html声明的画布.
其次,如果你没有正确的html标签和元字符集,画布可能会被限制为8196,否则你可以达到32767.
第三,如果获得画布的2d上下文然后更改画布大小,则可能也限制为8196.在抓取2d上下文之前简单地设置画布大小允许您最多拥有32767而不会出现内存错误.
我无法一直得到内存错误,有时它只在第一页加载,然后后续高度更改工作.这是我用http://pastebin.com/zK8nZxdE测试的html文件.
Dad*_*ado 14
iOS最大画布尺寸(宽x高):
iPod Touch 16GB = 1448x1448
iPad Mini = 2290x2289
iPhone 3 = 1448x1448
iPhone 5 = 2290x2289
2014年3月测试.
dcb*_*ans 11
要在@FredericCharette上进行扩展,请回答:根据safari的内容指南 "了解iOS资源限制":
对于RAM小于256 MB的设备,画布元素的最大大小为3百万像素,对于大于或等于256 MB RAM的设备,最大大小为5百万像素
因此,5242880(5 x 1024 x 1024)像素的任何尺寸变化都适用于大型存储设备,否则为3145728像素.
500万像素画布的示例(宽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
iOS有不同的限制.
使用iOS 7模拟器,我能够证明限制为5MB,如下所示:
var canvas = document.createElement('canvas');
canvas.width = 1024 * 5;
canvas.height = 1024;
alert(canvas.toDataURL('image/jpeg').length);
// prints "110087" - the expected length of the dataURL
但如果我用一行像素微调画布大小:
var canvas = document.createElement('canvas');
canvas.width = 1024 * 5;
canvas.height = 1025;
alert(canvas.toDataURL('image/jpeg'));
// prints "data:," - a broken dataURL
在PC-
我不认为有限制,但是你可以得到内存异常.
在移动设备上 -
以下是移动设备画布的限制: -
对于RAM小于256 MB的设备,画布元素的最大大小为3百万像素,对于RAM大于或等于256 MB的设备,最大大小为5百万像素.
例如 - 如果你想支持Apple的旧硬件,你的画布大小不能超过2048×1464.
希望这些资源能帮助你解决问题.
2018年更新：
随着时间的流逝，画布的局限性发生了变化。可悲的是，没有改变的是，浏览器仍然没有通过Canvas API提供有关画布大小限制的信息。
对于那些希望以编程方式确定浏览器的最大画布尺寸或测试对自定义画布尺寸的支持的用户，请查看canvas-size。
从文档：
HTML canvas元素受到现代和旧版浏览器的广泛支持，但是每种浏览器和平台组合都具有独特的大小限制，当超出限制时，将使画布无法使用。不幸的是，浏览器无法提供确定其局限性的方法，也无法在创建了无法使用的画布后提供任何形式的反馈。这使得处理大型画布元素成为一个挑战，尤其是对于支持各种浏览器和平台的应用程序而言。
该微库提供了浏览器支持的HTML canvas元素的最大面积，高度和宽度，以及测试自定义画布尺寸的能力。通过在创建新画布元素之前收集此信息，应用程序能够在每个浏览器/平台的大小限制内可靠地设置画布尺寸。
README中有一个演示链接和测试结果，还有一个有关性能和虚拟机注意事项的已知问题部分。
完全公开，我是图书馆的作者。我在2014年创建了它，最近又重新访问了与画布相关的新项目的代码。令我感到惊讶的是，在2018年仍然缺少可用的工具来检测画布大小限制，因此我更新了代码并发布了它，并希望它可以帮助其他遇到类似问题的人。