首页 > 其他分享> 文章详细

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

2020-06-28 13:56:37 阅读：293 来源： 互联网

标签：drawHeight canvas drawWidth img res let 动态绘制

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

标签：drawHeight,canvas,drawWidth,img,res,let,动态,绘制
来源： https://www.cnblogs.com/zhangyezi/p/13202477.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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