[极致用户体验] 如何实现响应式canvas？保持canvas比例？教你让canvas自适应屏幕宽度！

我是HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，发送加微信，交个朋友），转发本文前需获得作者HullQin授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏，不收费没广告。还开发了《Dice Crush》参加Game Jam 2022。喜欢可以关注我 HullQin 噢～我有空了会分享做游戏的相关技术。

背景

canvas是前端常常会用到的东西，尤其是对于游戏开发者、图表开发者而言。

响应式设计（网页元素可自适应各种屏幕宽度的设计）对于前端，也是非常重要的基本功之一。

前端开发者实现响应式设计的方案有多种，已经列举在之前的文章里了：《2行代码，让你的UI适配移动端、PC端，快来收藏》。文中主要讲述的方法是用width=device-width这个viewport结合min-width实现的，这个思路挺牛逼的，因为这同样适用于canvas。强烈推荐没看的同学看一下，这个思路真的超级实用。

什么是极致用户体验

1. 一屏展示全部canvas

但是本文要讲的响应式canvas，为了追求极致的用户体验，提出了更严格的限制：要求一屏能展示完整个canvas。

为什么要有这种限制？

尤其是针对游戏开发，不管在PC端、移动端，都不希望用户需要上下滚动来看到完整画面。甚至很多移动端游戏的交互是需要用户手指滑动的，这需要canvas监听用户滑动操作，用户就无法通过滑动来实现页面上下滚动了，导致看不到一部分网页。

所以这个限制是完全合理的，完全照顾到了极致用户体验。

2. canvas比例与页面初始比例一致

要求canvas比例跟页面的初始比例保持一致，这样用户不会有空空的感觉。但是之后如果用户缩放了浏览器，要求canvas比例保持不变（这其实是技术上不得不做的一种妥协）。

为什么只要求跟页面初始比例相同

1. 因为canvas在绘制后，要修改比例，那么内部所有元素的坐标都需要重绘，很多物理引擎计算需要重新做，对性能影响较大；
2. 而且开发成本也相当高，canvas不像Dom，页面宽度变了后浏览器可自动计算新布局，canvas改变布局是需要开发者手动计算每个元素的新位置的；
3. 页面初始比例确定后，大概率页面比例不会修改了。尤其是移动端，用户几乎无法修改页面尺寸（浏览器小窗的情况并不多）。

根据以上3点，得出结论：动态改canbas比例是开发成本极高、收益很低（用户使用次数少）的，即ROI很低，所以没必要动态修改canvas比例，只需要canvas比例保持页面的初始比例，就能达到很好的用户体验了。

此外，canvas比例常常有些极限值，如果屏幕比例超出canvas比例极限值，应该保持在极限值。例如画面宽高比例要求在1:1至1:2，那么屏幕太宽时，就只能设置canvas比例为极限的1:1了；而屏幕太窄时，只能设置canvas比例为极限的1:2。直接看例子：

• 例如屏幕太宽的场合，超过了canvas比例极限值，则高度塞满，宽度留白：

• 例如屏幕太窄的场合，超过了canvas比例极限值，则宽度塞满，高度留白：