通过测试发现，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. 机器学习&数据挖掘笔记_23（PGM练习七：CRF中参数的学习）

    前言: 本次实验主要任务是学习CRF模型的参数,实验例子和PGM练习3中的一样,用CRF模型来预测多张图片所组成的单词,我们知道在graph model的推理中,使用较多的是factor,而在grap ...

  2. Activity的四种launchMode《转》

    转自:http://blog.csdn.net/liuhe688/article/details/6754323/ Activity的四种launchMode. launchMode在多个Activi ...

  3. ASP.NET MVC 使用Jquery Uploadify 在非IE浏览器下Http Error的解决方案

    解决Uploadify上传控件在非IE浏览器中不工作,需要做如下2步修改: 1.Global.asax文件中,实现Application_BeginRequest函数: void Applicatio ...

  4. [水煮 ASP.NET Web API2 方法论]（3-9）空气路由的设置

    阅读导航 问题 解决方案 工作原理 代码演示 在此解释一下,空气路由,是本人臆想出来,觉着更能表达 IgnoreRoute 的意图,如果看着辣眼睛^^,请见谅. 问题 我们在之定义过集中式路由,集中式 ...

  5. Winform 显示Gif图片

    代码如下: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data ...

  6. C# 在异步中使用HttpWebRequest出现的“正在终止线程”错误的解决方案

    最近做接口对接,因需求变化需要用到异步推送信息,就利用委托做了异步. 程序运行过程中时不时出现“正在终止线程”的错误信息,导致两边订单信息不一致,代码如下: byte[] byteData = Enc ...

  7. iOS阶段学习第28天笔记(UIView的介绍)

    iOS学习(UI)知识点整理 一.关于UIVIew 的介绍 1)概念:UIView 是用于装载并展示各类控件的大容器,是iOS中所有UI控件的基类 2)UIView  初始化实例代码 UIView * ...

  8. DataTable 除去列中重复值

    DataTable dtPCI = dtblSourceData.DefaultView.ToTable(true, new string[] { "Server Cell PCI" ...

  9. 单元测试与Nunit的基本使用

    一.单元测试是什么 单元测试(unit testing),是指对软件中的最小可测试单元进行检查和验证.对于单元测试中单元的含义,一般来说,要根据实际情况去判定其具体含义,如C语言中单元指一个函数,C# ...

  10. 用于PHP的Gearman Worker管理工具GearmanManager

    项目地址:https://github.com/brianlmoon/GearmanManager PHP环境要求 PHP 5.5.9 POSIX extension Process Control ...