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 相关文章推荐
IE下写xml文件的两种方式(fso/saveAs)
Aug 05 Javascript
JavaScript数组各种常见用法实例分析
Aug 04 Javascript
canvas实现探照灯效果
Feb 07 Javascript
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
jQuery plugin animsition使用小结
Sep 14 jQuery
动手写一个angular版本的Message组件的方法
Dec 16 Javascript
Vue 按键修饰符处理事件的方法
May 04 Javascript
layer ui 导入文件之前传入数据的实例
Sep 23 Javascript
Servlet返回的数据js解析2种方法
Dec 12 Javascript
在Vue中使用Echarts实例图的方法实例
Oct 10 Javascript
js实现简易点击切换显示或隐藏
Nov 29 Javascript
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
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文件打包 下载之使用PHP自带的ZipArchive压缩文件并下载打包好的文件
2012/06/13 PHP
php中禁止单个IP与ip段访问的代码小结
2012/07/04 PHP
探讨php中遍历二维数组的几种方法详解
2013/06/08 PHP
通过php删除xml文档内容的方法
2015/01/23 PHP
浅谈PHP中关于foreach使用引用变量的坑
2016/11/14 PHP
PHP+Ajax无刷新带进度条图片上传示例
2017/02/08 PHP
PHP7匿名类的用法示例
2019/04/05 PHP
php查询内存信息操作示例
2019/05/09 PHP
thinkPHP+LayUI 流加载实现功能
2019/09/27 PHP
来自chinaz的ajax获取评论代码
2008/05/03 Javascript
Javascript 继承机制实例
2009/08/12 Javascript
jquery 图片Silhouette Fadeins渐显效果
2010/02/07 Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
2011/02/26 Javascript
JS对select控件option选项的增删改查示例代码
2013/10/21 Javascript
RequireJS使用注意细节
2016/05/15 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
2016/09/17 Javascript
给easyui datebox扩展一个清空的实例
2016/11/09 Javascript
使用ECharts实现状态区间图
2018/10/25 Javascript
JavaScript实现点击图片换背景
2020/11/20 Javascript
[52:57]2014 DOTA2国际邀请赛中国区预选赛 LGD-CDEC VS HGT
2014/05/21 DOTA
python opencv实现运动检测
2018/07/10 Python
python中plt.imshow与cv2.imshow显示颜色问题
2020/07/16 Python
如何利用Python给自己的头像加一个小国旗(小月饼)
2020/10/02 Python
HTML5安全介绍之内容安全策略(CSP)简介
2012/07/10 HTML / CSS
浅析HTML5中header标签的用法
2016/06/24 HTML / CSS
Haglöfs瑞典官方网站:haglofs火柴棍,欧洲顶级户外品牌
2018/10/18 全球购物
毕业生医学检验求职信
2013/10/16 职场文书
主管职责范文
2013/11/09 职场文书
大学生职业生涯规划范文
2014/01/08 职场文书
初婚初育证明
2014/01/14 职场文书
中学生期末评语
2014/02/03 职场文书
考试作弊检讨书大全
2014/02/18 职场文书
教师学期个人总结
2015/02/11 职场文书
开学第一天的感想
2015/08/10 职场文书
详解MySQL中的pid与socket
2021/06/15 MySQL
微信小程序scroll-view不能左右滑动问题的解决方法
2021/07/09 Javascript