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 相关文章推荐
Firefox和IE浏览器兼容JS脚本写法小结
Jul 07 Javascript
jquery HotKeys轻松搞定键盘事件代码
Aug 30 Javascript
基于jquery的inputlimiter 实现字数限制功能
May 30 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
Mar 03 Javascript
javascript中call和apply的用法示例分析
Apr 02 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
Jan 18 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
Jan 28 Javascript
JS实现获取剪贴板内容的方法
Jun 21 Javascript
js实现复选框的全选和取消全选效果
Jan 03 Javascript
js 概率计算(简单版)
Sep 12 Javascript
深入浅析Vue中的slots/scoped slots
Apr 03 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
Jun 21 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
php 运行效率总结(提示程序速度)
2009/11/26 PHP
ajax php传递和接收变量实现思路及代码
2012/12/19 PHP
PHP类继承 extends使用介绍
2014/01/14 PHP
php实现支付宝当面付(扫码支付)功能
2018/05/30 PHP
php+mysql开发中的经验与常识小结
2019/03/25 PHP
Javascript isArray 数组类型检测函数
2009/10/08 Javascript
javascript 鼠标拖动图标技术
2010/02/07 Javascript
js删除所有的cookie的代码
2010/11/25 Javascript
js 动态文字滚动的例子
2011/01/17 Javascript
jQuery的.live()和.die() 使用介绍
2011/09/10 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
2015/02/04 Javascript
JS实现重新加载当前页面或者父页面的几种方法
2016/11/30 Javascript
javascript中this关键字详解
2016/12/12 Javascript
微信小程序 小程序制作及动画(animation样式)详解
2017/01/06 Javascript
浅谈React + Webpack 构建打包优化
2018/01/23 Javascript
解决eclipse中没有js代码提示的问题
2018/10/10 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
2019/02/27 jQuery
js贪心算法 钱币找零问题代码实例
2019/09/11 Javascript
node 版本切换的实现
2020/02/02 Javascript
[00:32]DOTA2上海特级锦标赛 COL战队宣传片
2016/03/04 DOTA
新手该如何学python怎么学好python?
2008/10/07 Python
python每隔N秒运行指定函数的方法
2015/03/16 Python
Python解决八皇后问题示例
2018/04/22 Python
TFRecord文件查看包含的所有Features代码
2020/02/17 Python
基于pycharm实现批量修改变量名
2020/06/02 Python
python如何编写win程序
2020/06/08 Python
cookies应对python反爬虫知识点详解
2020/11/25 Python
详解CSS3 Media Queries中媒体属性的使用
2016/02/29 HTML / CSS
编写strcpy函数
2014/06/24 面试题
车队司机自我鉴定
2014/03/02 职场文书
宣传工作经验材料
2014/06/02 职场文书
教育专业毕业生推荐信
2014/07/10 职场文书
领导党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2015届本科毕业生自我鉴定
2014/09/27 职场文书
Java中多线程下载图片并压缩能提高效率吗
2021/07/01 Java/Android
CSS 鼠标选中文字后改变背景色的实现代码
2023/05/21 HTML / CSS