Heim > Artikel > Web-Frontend > Einschränkungen der Leinwandgröße in Mainstream-Browsern

Einschränkungen der Leinwandgröße in Mainstream-Browsern

高洛峰Original: 2016-10-12 10:22:522880Durchsuche

canvas画布在主流浏览器中的尺寸限制

通过测试发现，canvas在不同浏览器下面有不同的最大尺寸限制。

大家都知道，canvas有自身的width,height属性来控制尺寸，用css的width,height,控制显示的大小。可以理解为canvas就是一个img,属性的width,height就是这个img的原图像素大小。但在各浏览器下，设置canvas尺寸时发现有最大尺寸限制。测试一下与大家分享。

测试代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title></title>
</head>
<body style="width:100%;height:100%;">
    <div id="contain" style="position: absolute;top:0;right:0;left:0;bottom:0;margin:auto;width:100%;height:100%;background-color: #eee;">
        <canvas id="canvasid" width="4096" height="4096" style="width:100%;height:100%"></canvas>
    </div>
    <script type="text/javascript">
        var ctx=document.getElementById(&#39;canvasid&#39;).getContext(&#39;2d&#39;);
        ctx.fillStyle=&#39;#f00&#39;;
        ctx.fillRect(0,0,2000,2000);
    </script>
</body>
</html>

在IOS10下，自带浏览器和微信下，超过4096*4096像素则显示不了红色方块；

HUAWEI NXT-TL00手机自带浏览器和UC浏览器下，不能超过8192*8192像素；

在PC,CHROME浏览器，360浏览器，不能超过16384*16384像素；

　　搜狗浏览器，要比16384*16384稍微小一些；

　　firefox,最大数在11164*11164左右；

　　IE11、EDGE浏览器，没找到极限，只不过越大电脑越慢内存消耗严重；

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：html5--canvasNächster Artikel：html5--canvas

In Verbindung stehende Artikel

Mehr sehen