canvas 画布在主流浏览器中的尺寸限制详细介绍


Posted in Javascript onDecember 15, 2016

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('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,有兴趣的朋友可以帮忙测一下,把数据补上。

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

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
网页源代码保护(禁止右键、复制、另存为、查看源文件)
May 23 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
Aug 13 Javascript
JavaScript语言核心数据类型和变量使用介绍
Aug 23 Javascript
jquery获取css中的选择器(实例讲解)
Dec 02 Javascript
js select option对象小结
Dec 20 Javascript
用jquery的方法制作一个简单的导航栏
Jun 23 Javascript
深入理解javascript构造函数和原型对象
Sep 23 Javascript
jquery实现公告翻滚效果
Feb 27 Javascript
使用vue制作探探滑动堆叠组件的实例代码
Mar 07 Javascript
用Golang运行JavaScript的实现示例
Nov 25 Javascript
js实现简单的无缝轮播效果
Sep 05 Javascript
JS数组去重详情
Nov 07 Javascript
JavaScript实现Fly Bird小游戏
Dec 15 #Javascript
JS中对数组元素进行增删改移的方法总结
Dec 15 #Javascript
JS去除重复并统计数量的实现方法
Dec 15 #Javascript
javascript基于原型链的继承及call和apply函数用法分析
Dec 15 #Javascript
移动端脚本框架Hammer.js
Dec 15 #Javascript
WEB开发之注册页面验证码倒计时代码的实现
Dec 15 #Javascript
浅谈javascript alert和confirm的美化
Dec 15 #Javascript
You might like
IIS php环境配置PHP5 MySQL5 ZendOptimizer phpmyadmin安装与配置
2008/11/18 PHP
用php实现的获取网页中的图片并保存到本地的代码
2010/01/05 PHP
phpexcel导出excel的颜色和网页中的颜色显示不一致
2012/12/11 PHP
PHP实现定时执行任务的方法
2014/10/05 PHP
php使用session二维数组实例
2014/11/06 PHP
WordPress开发中用于标题显示的相关函数使用解析
2016/01/07 PHP
YII2.0之Activeform表单组件用法实例
2016/01/09 PHP
php获取本机真实IP地址实例代码
2016/03/31 PHP
tp5(thinkPHP5框架)使用DB实现批量删除功能示例
2019/05/28 PHP
PHP实现简单登录界面
2019/10/23 PHP
HTML5如何适配 iPhone IOS 底部黑条
2021/03/09 HTML / CSS
Js 随机数产生6位数字
2010/05/13 Javascript
JQuery鼠标移到小图显示大图效果的方法
2015/06/10 Javascript
js判断移动端是否安装某款app的多种方法
2015/12/18 Javascript
jquery实现二级导航下拉菜单效果
2015/12/18 Javascript
用js实现简单算法的实例代码
2016/09/24 Javascript
JavaScript实现星星等级评价功能
2017/03/22 Javascript
详解Vue 非父子组件通信方法(非Vuex)
2017/05/24 Javascript
深入理解Vue官方文档梳理之全局API
2017/11/22 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
2019/03/09 Javascript
深入浅析vue全局环境变量和模式
2020/04/28 Javascript
用VsCode编辑TypeScript的实现方法
2020/05/07 Javascript
[42:04]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第一局
2016/03/03 DOTA
基于Python3.6+splinter实现自动抢火车票
2018/09/25 Python
pycharm 对代码做静态检查操作
2020/06/09 Python
C/C++ 笔试、面试题目大汇总
2015/11/21 面试题
DataReader和DataSet的异同
2014/12/31 面试题
Linux不知道文件后缀名怎么判断文件类型
2012/04/26 面试题
计算机工程学院个人求职信
2013/10/05 职场文书
大学生物业管理求职信
2013/10/24 职场文书
元宵节晚会主持人串词
2014/03/25 职场文书
爱国演讲稿400字
2014/05/07 职场文书
公安派出所所长四风问题个人对照检查材料
2014/10/04 职场文书
2015年党支部书记工作总结
2015/05/21 职场文书
MySQL sql_mode修改不生效的原因及解决
2021/05/07 MySQL
关于springboot配置druid数据源不生效问题(踩坑记)
2021/09/25 Java/Android