canvas显示设置了尺寸,为什么实际绘制时还是被错误了呢?

小程序 文章 2021-03-24 10:21 0 25 全屏看文

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!

回答:

smileLife:

https://developers.weixin.qq.com/s/BrjeN2mH74po ,看看这个可以吗?

武曲心:

这个尺寸你得好好琢磨一下,有很多影响因素的,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)

  }

-EOF-