为了不浪费大家时间，先展示最终效果，看看是不是大家需要的解决方案：

完整项目地址：https://github.com/zxf20180725/canvas_auto-adapted

标准分辨率：

其他分辨率的适配情况：

1.canvas的内容能全部展示在屏幕上

2.尽量能保证图像不变形

3.绘制的文字也能自适应

1.我们需要指定一个标准分辨率gameW和gameH

2.我们需要获取屏幕的实际分辨率：

screenW=document.documentElement.clientWidth

screenH=document.documentElement.clientHeight

3.把canvas的宽高设置为屏幕一样大

4.计算屏幕宽度与标准宽度的比值：

kW=screenW/gameW

5.适配之后的绘图区高度可能小于屏幕高度，所以会出现黑边。那么我们需要计算黑边的高度：

dY = (screenH - gameH * kW) / 2;    //黑色区域的高度（紫色区域顶部与屏幕顶部的距离）

注意，当dY小于0时，绘图区会超出屏幕范围，这时就需要压缩绘图区高度（这时，画面会有所变形，也是不可避免的事）：