关于动态设置canvas大小绘制背景

最近新换了个工作环境，公司后期可能会要求做H5小游戏，这个东西嘛，之前到时做过一些demo，但是都是开始学习前端时的故事了，

于是乎，打开百度，找个demo教程，打算再从头到尾做一次加深印象，于是乎找到了一片H5实现flyppybird的教程，就是那只偏要在管管当中进进出出的鸟儿，链接在此JavaScript操作canvas制作前端H5小游戏——Flappy Bird - CSDN博客

但是一开始就碰到了一个问题，我想要canvas的大小随着屏幕可视宽高来设置，用了 $('#canvas').css(),加canvas的drawImage方法来绘制背景，

但是绘制出来的背景总是会被拉伸，上网找了半天才知道，canvas变更CSS属性的宽高，大小是变了，但是像素点没有增加，所以会导致图片被拉伸，只能设置其attr，好嘛，这个问题解决了

下个问题又来了，宽高倒是设置好了，背景图片又加载不出来了，看了网上一大堆要等img加载完成，使用img.onload去调用drawImage,但是还是会出现背景布空白的问题

推测问题：画布在变更大小的时候，图片没有存储下来

解决思路：这么多杂七杂八的，懒得将就你，直接上promise，你给我在回调当中去绘制

上代码直接

---

let cvs =document.getElementById("canvas");

let ctx =cvs.getContext("2d");

let pro =new Promise(function(resolve,reject){

let drawHeight =document.documentElement.clientHeight //获取可视区域高度

  let drawWidth =document.documentElement.clientWidth //获取可视区域宽度

  drawWidth =drawWidth >500 ?500:drawWidth

  drawHeight =drawHeight >700 ?700:drawHeight

  document.getElementById('canvas').setAttribute('width',drawWidth)

document.getElementById('canvas').setAttribute('height',drawHeight)

let img =new Image();

img.src='../img/sky.png'

  img.onload=function () {

let resList = {'img':img,'width':drawWidth,'height':drawHeight}// 将img和宽高通过resolve传递给then()

    resolve(resList)

}

}).then(function (res) {

//  console.log(res)

  ctx.drawImage(res.img,0,0,res.width,res.height)

})