微信小程序画布canvas制作海报图片清晰度过低

出现的问题

在制作时出现了在画布上画出来的图片特别糊的问题，原图清晰度是没问题的

定义画布

<canvas type="2d" id="canvas" style="width: 270px;height: 450px;"></canvas>

在onLoad生命周期中声明画布

wx.createSelectorQuery().select('#canvas').fields({node: true,size: true,}).exec(that.init.bind(that))

创建画布

init(res) {console.log(res)var that = thisconst canvas = res[0].node;const ctx = canvas.getContext('2d');const dpr = wx.getSystemInfoSync().pixelRatio;canvas.width = res[0].width * dpr;canvas.height = res[0].height * dpr;ctx.scale(dpr, dpr)var bg = canvas.createImage();bg.src = '//12/12/oqiBE6.jpg';// 在Canvas画布 添加图片bg.onload = () => {ctx.drawImage(bg, 0, 0, 270, 450);}},

解决方法就是上面创建画布中的这四行，

const dpr = wx.getSystemInfoSync().pixelRatio;canvas.width = res[0].width * dpr;canvas.height = res[0].height * dpr;ctx.scale(dpr, dpr)

getSystemInfoSync获取用户设备的相关信息；

pixelRatio设备像素比；

将画布的宽高重新定义一下。