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和FireFox)
Mar 09 Javascript
一个JS小玩意 几个属性相加不能超过一个特定值.
Sep 29 Javascript
javascript 清空form表单中某种元素的值
Dec 26 Javascript
JavaScript执行顺序详细介绍
Dec 04 Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
Jun 23 Javascript
基于jQuery的Web上传插件Uploadify使用示例
May 19 Javascript
javascript加减乘除的简单实例
Jul 12 Javascript
JS实现图片局部放大或缩小的方法
Aug 20 Javascript
vuejs如何配置less
Apr 25 Javascript
React/Redux应用使用Async/Await的方法
Nov 16 Javascript
JavaScript获取当前url路径过程解析
Dec 27 Javascript
关于引入vue.js 文件的知识点总结
Jan 28 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版自动生成文章摘要
2008/07/23 PHP
深入探讨<br />和 \r\n两者有什么区别??
2013/06/05 PHP
PHP入门经历和学习过程分享
2014/04/11 PHP
php 无限级分类,超级简单的无限级分类,支持输出树状图
2014/06/29 PHP
简单谈谈PHP中strlen 函数
2016/02/27 PHP
使用PHP反射机制来构造&quot;CREATE TABLE&quot;的sql语句
2019/03/21 PHP
img的onload的另类用法
2008/01/10 Javascript
利用jQuery操作对象数组的实现代码
2011/04/27 Javascript
js实现图片轮播效果
2015/12/19 Javascript
微信小程序 canvas API详解及实例代码
2016/10/08 Javascript
简单实现Vue的observer和watcher
2016/12/21 Javascript
JS实现旋转木马式图片轮播效果
2017/01/18 Javascript
AngularJS获取json数据的方法详解
2017/05/27 Javascript
详解webpack的配置文件entry与output
2017/08/21 Javascript
Angular5中状态管理的实现
2018/09/03 Javascript
jquery实现点击弹出对话框
2020/02/08 jQuery
Python如何实现守护进程的方法示例
2017/02/08 Python
Python OpenCV处理图像之图像像素点操作
2018/07/10 Python
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
python感知机实现代码
2019/01/18 Python
不到40行代码用Python实现一个简单的推荐系统
2019/05/10 Python
python批量修改ssh密码的实现
2019/08/08 Python
python numpy之np.random的随机数函数使用介绍
2019/10/06 Python
Python threading.local代码实例及原理解析
2020/03/16 Python
python--shutil移动文件到另一个路径的操作
2020/07/13 Python
CSS3 对过渡(transition)进行调速以及延时
2020/10/21 HTML / CSS
酒店管理专业毕业生推荐信
2013/11/10 职场文书
证券期货行业个人的自我评价
2013/12/26 职场文书
校运会入场式解说词
2014/02/10 职场文书
护士长竞聘书
2014/03/31 职场文书
竞选副班长演讲稿
2014/04/24 职场文书
出国留学计划书
2014/04/27 职场文书
书香家庭事迹材料
2014/05/09 职场文书
2015年计生工作总结范文
2015/04/24 职场文书
关于迟到的检讨书
2015/05/06 职场文书
幼儿园语言教学反思
2016/02/23 职场文书