Canvas 在不同浏览器下的最大尺寸限制测试及分享

Canvas搞定静态图啊、动态效果这些无压力吧～不过要注意，有很多浏览器还是会对它有限制的，比如大小这问题。那今天咱们就研究研究，Canvas到底在不同的浏览器里能够画出多大的画。

Canvas的基本概念

先说说Canvas，它就是HTML5里面的一个小玩意儿，用JavaScript可以随意涂鸦。画布有多大？就看你咋设置width和height这两个值！这些数字可得注意了，它们可决定画面的像素呦~别忘了，CSS里的width和height实际上指的是画面大小跟咱们平时看图时放大缩小差不多。

不同浏览器的尺寸限制

嗯呐，基本知识说完，接下来咱们聊聊要点。我用Canvas试过水，发现它有那么点儿小毛病~比如说，你要是在iOS10系统自带的浏览器或者微信里用canvas，分辨率要是大于4096×4096的话，那么你的红方块可能就神秘失踪没影儿了哈哈哈。

移动端浏览器的限制

我用过华为NXT-TL00原装和UC浏览器看图片，但最大只支持8192*8192的像素，再大就模糊不清。挺失望的，毕竟现在人手一部手机。

    
    
    


    

        
    
    
        var ctx=document.getElementById('canvasid').getContext('2d');
        ctx.fillStyle='#f00';
        ctx.fillRect(0,0,2000,2000);
    

PC端浏览器的限制

我这电脑浏览网页的时候有问题，无论我用Chrome还是360都只能看清16384×16384这么大的图片，挺厉害。但是再大点儿就不行了。然后我试了下搜狗和火狐浏览器，发现它们也只能到11537×11537罢了。

IE和EDGE浏览器的特殊情况

哈喽，给大家说说IE11和EDGE浏览器！我这搞不清这两个软件的最大文件限制在哪，但只要文件一多，电脑就卡成狗，还狂占内存！这可不是闹着玩儿的，因为还有好多人在用这些！

测试代码的分享

看这篇文章前，先来做个小实验。只需要把下面这段代码跑起来，就可以知道各种浏览器对画布大小限制的严格程度。有点难度，别怕，看完后你一定收获满满！

Canvas尺寸限制的影响

这事儿咋跟咱有啥关系？对了要在canvas上画图可得选一个合适的大小啊…当然，要是想搞大规模的canvas项目，比如做个游戏或者展示数据变化的那种，这个限制就可能挺烦人！

如何应对尺寸限制

包子大小有限，咱们得想别的招儿，比方说将包子切开，像画布似的，这样就可以不被规则束缚了。说到WebGL，可能会有些难度，不过它的性能太棒了，破解限制根本不是事儿。

未来的展望

咱聊聊未来呗？我觉得科技越来越牛了，限制也在变少。新的浏览器和新技术让咱们有更多选择！

Canvas的大小限制确实让人冒火，但只要掌握点儿小技巧就能解决。现在不聊它了。好想知道你们在现实项目中碰见这种问题没？咋应对的？快跟我分享下！别忘了给我点赞，分享出去也挺好的！