hanyeah

设备分辨率太多了，基于canvas的开发中，经常要做屏幕自适应。

屏幕自适应的实现，我们经常会用到设计尺寸和显示尺寸的概念。canvas有两个地方可以设置宽高，如<canvas width = "100px" height = "100px" style = "width:200px;height:200px;"></canvas>。style中的尺寸为显示尺寸，最终以style中的尺寸呈现给用户，外边的尺寸为设计尺寸，canvas内部开发中使用的尺寸。

相当于我们在设计尺寸下开发，对于开发者来说尺寸是不变的，然后再整体缩放canvas来适应屏幕。

经常用到的自适应方式是，等比缩放，显示全部内容，留白。

比如设计尺寸100*100，屏幕尺寸200*50，最终显示为50*50，屏幕上剩余的150像素为空白区域。

最终为<canvas width = "100px" height = "100px" style = "width:50px;height:50px;"></canvas>

如果我们不希望两侧留大量空白，就要在留白的基础上扩展canvas。

同样是上面的例子，最终呈现为200*50。

最终为<canvas width = "400px" height = "100px" style = "width:200px;height:50px;"></canvas>

设计尺寸和显示尺寸要保持宽高比一致，否则就变形了。

为什么不是<canvas width = "200px" height = "50px" style = "width:200px;height:50px;"></canvas>？

因为这样canvas内部的显示对象就显示不全了。

看起来没问题。实际效果也很好。

但是我们算一下，设计尺寸变成了400*100,为40000像素，而实际上窗口只有200*50=10000像素。

canvas的实际像素点的计算是以设计尺寸为准的。设计尺寸的像素数多了，内存、cpu、GPU占用就会多。导致性能下降。

如果是应用了滤镜、抗锯齿等效果，差距更明显。

这种方案的好处是简单。如果性能要求不高，或者不是太复杂，弊端体现不出来。

要解决这个问题，还是要把场景的自适应挪到canvas内部。外部让canvas的设计尺寸和显示尺寸一直保持一致，canvas内部实现自适应。

可以多嵌套一层来实现，计算方法就和原来一样了；或者定义一个viewPort，和平移缩放放到一起，计算整体的平移缩放值。类似于3D开发中的camera。