代码片段:https://developers.weixin.qq.com/s/OK1Ml2mN7jpQ
即使是显示设置了canvas的尺寸,为什么在实际绘制的时候那个圆还是被纵向被拉伸了?要怎么样才能既自定义canvas尺寸,还能保证绘制正确呢?谢谢!
canvas显示设置了尺寸,为什么实际绘制时还是被错误了呢?The canvas display has set the size, why is it wrong when actually drawing?
canvas显示设置了尺寸,为什么实际绘制时还是被错误了呢?代码片段:https://developers.weixin.qq.com/s/OK1Ml2mN7jpQ
即使是显示设置了canvas的尺寸,为什么在实际绘制的时候那个圆还是被纵向被拉伸了?要怎么样才能既自定义canvas尺寸,还能保证绘制正确呢?谢谢!
Code snippet: https://developers.weixin.qq.com/s/OK1Ml2mN7jpQ Even if the canvas size is set for display, why is the circle stretched longitudinally when it is actually drawn? How to customize the canvas size and make sure the drawing is correct? thank you!
回答:
画圆用 rect+borderRadius
https://developers.weixin.qq.com/community/develop/article/doc/000ac686c5c5506f18b87ee825b013
这个尺寸你得好好琢磨一下,有很多影响因素的,dpr也是对生成图片有影响的,开发时要适时通过ctx.scale缩放观察
drawInit() {
this.createSelectorQuery()
.select('#poster')
.fields({
node: true,
size: true,
})
.exec(this.canvasInit.bind(this))
},
canvasInit (res) {
// const dpr = wx.getSystemInfoSync().pixelRatio
const width = res[0].width * 2
const height = res[0].height * 2
this.canvasObj = res[0].node
const ctx = this.canvasObj.getContext('2d')
this.canvasObj.width = width
this.canvasObj.height = height
// ctx.scale(0.5, 0.5)
this.drawCanvas(width, height)
}
https://developers.weixin.qq.com/s/BrjeN2mH74po ,看看这个可以吗?