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

我想要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)

})

 

另外一种方式：https://blog.csdn.net/qq_29594393/article/details/52849339