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 相关文章推荐
动态加载iframe
Jun 16 Javascript
用js实现的抽象CSS圆角效果!!
May 03 Javascript
jQuery创建插件的代码分析
Apr 14 Javascript
jquery实现div阴影效果示例代码
Sep 16 Javascript
JavaScript的21条基本知识点
Mar 04 Javascript
jQuery EasyUI常用数据验证汇总
Sep 18 Javascript
使用Bootstrap打造特色进度条效果
May 02 Javascript
详谈commonjs模块与es6模块的区别
Oct 18 Javascript
详解使用React全家桶搭建一个后台管理系统
Nov 04 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
Jul 09 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
Dec 09 Javascript
微信小程序与后台PHP交互的方法实例分析
Dec 10 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判断类是否存在函数class_exists用法分析
2014/11/14 PHP
PHP加MySQL消息队列深入理解
2021/02/27 PHP
js类中获取外部函数名的方法与代码
2007/09/12 Javascript
IE6不能修改NAME问题的解决方法
2010/09/03 Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
2013/12/30 Javascript
Backbone.js框架中简单的View视图编写学习笔记
2016/02/14 Javascript
解析jQueryEasyUI的使用
2016/11/22 Javascript
Node.js读取文件内容示例
2017/03/07 Javascript
mac上配置Android环境变量的方法
2018/07/08 Javascript
详解JavaScript事件循环机制
2018/09/07 Javascript
微信小程序获取用户openid的实现
2018/12/24 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
2019/06/10 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
2019/09/06 Javascript
解决layui laydate 时间控件一闪而过的问题
2019/09/28 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
2019/11/14 Javascript
Vue实现多标签选择器
2019/11/28 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
2020/08/07 Javascript
Python lxml模块安装教程
2015/06/02 Python
在Django中进行用户注册和邮箱验证的方法
2016/05/09 Python
python3.4用循环往mysql5.7中写数据并输出的实现方法
2017/06/20 Python
python使用numpy读取、保存txt数据的实例
2018/10/14 Python
Python实现一个数组除以一个数的例子
2019/07/20 Python
Python爬取数据并实现可视化代码解析
2020/08/12 Python
Python基于staticmethod装饰器标示静态方法
2020/10/17 Python
KEETSA环保床垫:更好的睡眠,更好的生活!
2016/11/24 全球购物
Feelunique中文官网:欧洲最大化妆品零售电商
2020/07/10 全球购物
机电专业个人求职信范文
2013/12/30 职场文书
家长对老师的感言
2014/03/11 职场文书
学雷锋演讲稿汇总
2014/05/10 职场文书
应届硕士毕业生自荐信
2014/05/26 职场文书
最美乡村医生事迹材料
2014/06/02 职场文书
小学生环保标语
2014/06/13 职场文书
生物科学专业自荐书
2014/06/20 职场文书
优秀教师单行材料
2014/12/16 职场文书
上诉状格式
2015/05/23 职场文书
小学作文指导之如何写人?
2019/07/08 职场文书