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,有兴趣的朋友可以帮忙测一下,把数据补上。
以上测试结果,只是根据上面的代码,如果测试不准确,或者其它原因请指正。
canvas画布在主流浏览器中的尺寸限制的更多相关文章
- Canvas画图在360浏览器中跑偏的问题
问题描述,canvas画图的js代码中编写的是画正方形的代码,结果在360浏览器上变成了长方形,不知道怎么回事,请问各位大神是否遇到过此类问题? <!DOCTYPE html> <h ...
- 实时监听input输入的变化(兼容主流浏览器)【转】
遇到如此需求,首先想到的是change事件,但用过change的都知道只有在input失去焦点时才会触发,并不能满足实时监测的需求,比如监测用户输入字符数. 在经过查阅一番资料后,欣慰的发现firef ...
- [转] 实时监听input输入的变化(兼容主流浏览器)
遇到如此需求,首先想到的是change事件,但用过change的都知道只有在input失去焦点时才会触发,并不能满足实时监测的需求,比如监测用户输入字符数. 在经过查阅一番资料后,欣慰的发现firef ...
- javascript解决在safari浏览器中使用history.back()返回上一页后页面不会刷新的问题
我们知道,在JavaScript中提供了一个window.history.back()方法用于返回上一页,另外也可以使用window.history.go(-1)返回上一页(跳转). 在其他的主流浏览 ...
- 实时监听input输入的变化(兼容主流浏览器)
遇到如此需求,首先想到的是change事件,但用过change的都知道只有在input失去焦点时才会触发,并不能满足实时监测的需求,比如监测用户输入字符数. 在经过查阅一番资料后,欣慰的发现firef ...
- Js 日期选择,可以的一个页面中重复使用本JS日历,兼容IE及火狐等主流浏览器,而且界面简洁、美观,操作体验也不错。
<html> <head> <title>Js日期选择器并自动加入到输入框中</title> <meta http-equiv="con ...
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
js中对arry数组的各种操作小结 最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...
- 如何使用canvas绘制椭圆,扩展非chrome浏览器中的ellipse方法
这篇博文主要针对浏览器中绘制椭圆的方法扩展.在网上搜索了很多,发现他们绘制椭圆的方式都有缺陷.其中有压缩法,计算法,贝塞尔曲线法等多种方式.但是都不能很好的绘制出椭圆.所有我就对这个绘制椭圆的方式进行 ...
- 五大主流浏览器 CSS3 和 HTML5 兼容性大比拼
各大主流浏览器对 CSS3 和 HTML5 的支持越来越完善,曾经让多少前端开发人员心碎的IE系也开始拥抱标准.就在前几天,W3C的 HTML5 社区领袖 Shelley 宣布,HTML5的开发工作已 ...
随机推荐
- Hadoop官方文档翻译——HDFS Architecture 2.7.3
HDFS Architecture HDFS Architecture(HDFS 架构) Introduction(简介) Assumptions and Goals(假设和目标) Hardware ...
- Visual C++ 6.0使用教程
Visual C++它大概可以分成三个主要的部分: 3. Platform SDK.这才是Visual C++和整个Visual Studio的精华和灵魂,虽然我们很少能直接接触到它.大致说来,Pla ...
- eclipse使用tomcat进行部署时编译代码不一致的处理
操作步骤: 1. 先add and remove 去除项目 2. clean 完成清除工程在tomcat的目录 3. project-->clean 4. add adn remove 重新添加 ...
- [转载]PhotoShop性能优化
现在随着Photoshop版本越来越高功能也越来越强大,而往往强大的功能需要电脑有好的配置运行,比如HDR.图像合成或者3D和视频等类似的功能,还有处理比较大尺寸的图像时,如果电脑配置不够强往往非常卡 ...
- Hibernate的session一级缓存
一级缓存是Session周期的,当session创建的时候就有,当session结束的时候,缓存被清空 当缓存存在的时候,每次查询的数据,都会放在缓存中,如果再次查询相同的数据,则不会再次查询数据库, ...
- HTML5实现3D和2D可视化QuadTree四叉树碰撞检测
QuadTree四叉树顾名思义就是树状的数据结构,其每个节点有四个孩子节点,可将二维平面递归分割子区域.QuadTree常用于空间数据库索引,3D的椎体可见区域裁剪,甚至图片分析处理,我们今天介绍的是 ...
- HTML5五种客户端离线存储方案
最近折腾HTML5游戏需要离线存储功能,便把目前可用的几种HTML5存储方式研究了下,基于HT for Web写了个综合的实例,分别利用了Cookie.WebStorage.IndexedDB以及Fi ...
- JS魔法堂:IMG元素加载行为详解
一.前言 在<JS魔法堂:jsDeferred源码剖析>中我们了解到img元素加载失败可以作为函数异步执行的优化方案,本文打算对img元素的加载行为进行更深入的探讨. 二.资源加载的相关属 ...
- SQL Server获取下一个编码字符实现继续重构与增强
我在SQL Server获取下一个编码字符实现的博文中,虽然实现了这个问题,但是感觉维护起来比较麻烦,例如如果调整编码字符串的固定长度,就需要变更三个函数,这样的为何成本确实比较大.面向对象编 ...
- TextBox禁止复制粘贴和数字验证,小数验证,汉字验证
验证小数 #region 验证小数 /// <summary> /// 验证小数 /// </summary> /// <param name="sender& ...