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 相关文章推荐
jQuery图片预加载 等比缩放实现代码
Oct 04 Javascript
Array.prototype.concat不是通用方法反驳[译]
Sep 20 Javascript
JQuery动画和停止动画实例代码
Mar 01 Javascript
JavaScript 函数replace深入了解
Mar 14 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
Jul 05 Javascript
jQuery中常用动画效果函数(日常整理)
Sep 17 Javascript
webpack 2的react开发配置实例代码
Jul 28 Javascript
element-ui 限制日期选择的方法(datepicker)
May 16 Javascript
JavaScript判断数组类型的方法
Oct 23 Javascript
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
浅析vue-router实现原理及两种模式
Feb 11 Javascript
Vue-router 报错NavigationDuplicated的解决方法
Mar 31 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
使用adodb lite解决问题
2006/12/31 PHP
php学习 函数 课件
2008/06/15 PHP
php中DOMDocument简单用法示例代码(XML创建、添加、删除、修改)
2010/12/19 PHP
PHP中运用jQuery的Ajax跨域调用实现代码
2012/02/21 PHP
php session劫持和防范的方法
2013/11/12 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
2011/05/24 Javascript
jQuery 源码分析笔记(4) Ready函数
2011/06/02 Javascript
window.open不被拦截的实现代码
2012/08/22 Javascript
php图像生成函数之间的区别分析
2012/12/06 Javascript
Jquery倒计时源码分享
2014/05/16 Javascript
提升PHP安全:8个必须修改的PHP默认配置
2014/11/17 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
2016/06/06 Javascript
纯JS实现弹性导航条效果
2017/03/06 Javascript
如何在Node和浏览器控制台中打印彩色文字
2020/01/09 Javascript
[01:20]2018DOTA2亚洲邀请赛总决赛战队Mineski晋级之路
2018/04/07 DOTA
[01:33]完美世界DOTA2联赛PWL S3 集锦第二期
2020/12/21 DOTA
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
Python写的英文字符大小写转换代码示例
2015/03/06 Python
python中OrderedDict的使用方法详解
2017/05/05 Python
python模块之time模块(实例讲解)
2017/09/13 Python
selenium python浏览器多窗口处理代码示例
2018/01/15 Python
Python 学习教程之networkx
2019/04/15 Python
Python 中PyQt5 点击主窗口弹出另一个窗口的实现方法
2019/07/04 Python
python路径的写法及目录的获取方式
2019/12/26 Python
HTML5中判断横屏竖屏的方法(移动端)
2016/08/04 HTML / CSS
Microsoft Advertising美国:微软搜索广告
2019/05/01 全球购物
意大利时尚奢侈品店:D’Aniello Boutique
2021/01/19 全球购物
大学生专科毕业生自我评价
2013/11/17 职场文书
家居设计专业个人自荐信范文
2013/11/26 职场文书
高职教师岗位职责
2013/12/24 职场文书
创建卫生先进单位实施方案
2014/03/10 职场文书
学习教师敬业奉献模范事迹材料思想汇报
2014/09/19 职场文书
会计实训总结范文
2015/08/03 职场文书
2019职场实习报告该怎么写?
2019/07/01 职场文书
Spring Boot实现文件上传下载
2022/08/14 Java/Android