通过测试发现，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('canvasid').getContext('2d');

        ctx.fillStyle='#f00';

        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浏览器，没找到极限，只不过越大电脑越慢内存消耗严重；

从上面也可以看出，浏览器内核影响着这个数。手头上没有MAC，有兴趣的朋友可以帮忙测一下，把数据补上。

以上测试结果，只是根据上面的代码，如果测试不准确，或者其它原因请指正。

canvas画布在主流浏览器中的尺寸限制的更多相关文章

  1. Canvas画图在360浏览器中跑偏的问题

    问题描述,canvas画图的js代码中编写的是画正方形的代码,结果在360浏览器上变成了长方形,不知道怎么回事,请问各位大神是否遇到过此类问题? <!DOCTYPE html> <h ...

  2. 实时监听input输入的变化（兼容主流浏览器）【转】

    遇到如此需求,首先想到的是change事件,但用过change的都知道只有在input失去焦点时才会触发,并不能满足实时监测的需求,比如监测用户输入字符数. 在经过查阅一番资料后,欣慰的发现firef ...

  3. [转] 实时监听input输入的变化（兼容主流浏览器）

    遇到如此需求,首先想到的是change事件,但用过change的都知道只有在input失去焦点时才会触发,并不能满足实时监测的需求,比如监测用户输入字符数. 在经过查阅一番资料后,欣慰的发现firef ...

  4. javascript解决在safari浏览器中使用history.back()返回上一页后页面不会刷新的问题

    我们知道,在JavaScript中提供了一个window.history.back()方法用于返回上一页,另外也可以使用window.history.go(-1)返回上一页(跳转). 在其他的主流浏览 ...

  5. 实时监听input输入的变化（兼容主流浏览器）

    遇到如此需求,首先想到的是change事件,但用过change的都知道只有在input失去焦点时才会触发,并不能满足实时监测的需求,比如监测用户输入字符数. 在经过查阅一番资料后,欣慰的发现firef ...

  6. Js 日期选择，可以的一个页面中重复使用本JS日历，兼容IE及火狐等主流浏览器，而且界面简洁、美观，操作体验也不错。

    <html> <head> <title>Js日期选择器并自动加入到输入框中</title> <meta http-equiv="con ...

  7. js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符

    js中对arry数组的各种操作小结   最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...

  8. 如何使用canvas绘制椭圆,扩展非chrome浏览器中的ellipse方法

    这篇博文主要针对浏览器中绘制椭圆的方法扩展.在网上搜索了很多,发现他们绘制椭圆的方式都有缺陷.其中有压缩法,计算法,贝塞尔曲线法等多种方式.但是都不能很好的绘制出椭圆.所有我就对这个绘制椭圆的方式进行 ...

  9. 五大主流浏览器 CSS3 和 HTML5 兼容性大比拼

    各大主流浏览器对 CSS3 和 HTML5 的支持越来越完善,曾经让多少前端开发人员心碎的IE系也开始拥抱标准.就在前几天,W3C的 HTML5 社区领袖 Shelley 宣布,HTML5的开发工作已 ...

随机推荐

  1. oc连接signalr，各种填坑

    在网上搜了signalr的oc客户端,基本上都指向同一个东西https://github.com/DyKnow/SignalR-ObjC 但是这个也有日子没更新了,用cocoapods安装下来是编译不 ...

  2. c#socket同步通信

    再次特别感谢张子阳老师的文章,读后深感益处. 废话不多说,先贴代码 这是服务器端代码 using System; using System.Collections.Generic; using Sys ...

  3. Gephi可视化（一）——使用Gephi Toolkit创建Gephi应用

    在Prefuse上摸打滚爬了一段时间,发现其和蔼可亲,容易上手.但是每每在打开gephi,导入数据再运行时,总还是在心里暗自赞叹gephi的绚烂之极,无与匹敌,当然,gephi也有自己的缺陷,但是ge ...

  4. 让 jQuery UI draggable 适配移动端

    背景: 在移动端,本人要实现对某个元素的拖动,想到使用 jQuery UI 的 draggable 功能.但是发现此插件的拖动只支持PC端,不支持移动端. 原因: 原始的 jQuery UI 里,都是 ...

  5. 【深入BFC】 关于CSS中float布局，清除浮动，和margin合并的原理解析，解开你心中的那些困惑！

    BFC的通俗理解: Block Formatting Context(块级格式化上下文)是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. ...

  6. msvc2013编译qt5.6源码

    1.回顾 说起到qt的编译,真是领人痛心啊,不仅编译选项繁多,而且编译时间比较久,总是能使想编译qt源码的人望而却步,呵呵...我就是其中一个,不知道从什么时候开始就想着把qt的源码编译一下,也尝试过 ...

  7. vim黏贴自动增加tab的毛病

    vim在ctrl + p的时候有可能会自动给你增加了个tab 很是郁闷   解决方法如下: :set noautoindent :set nosmartindent

  8. SpringMVC详细示例

    一.SpringMVC基础入门,创建一个HelloWorld程序 0.框架结构 1.首先,导入SpringMVC需要的jar包. 2.添加Web.xml配置文件中关于springmvc的配置 < ...

  9. 安装windows系统的installutil

    /// 该服务必须在它可以执行之前安装.    /// 服务的安装和卸载“installutil.exe”“installutil.exe / U”的服务可执行文件作为最后一个参数.    ///  ...

  10. C#读取配置文件的几种方式

    配置文件 <?xml version="1.0" encoding="utf-8" ?> <configuration> <con ...