收藏
回答

新版canvas绘制图形出现偏移和变形和模糊?

基础库:2.21.0,在开发者工具上使用新版canvas 2d绘制了一个长宽100的正方形,结果完全变形。

使用vivo手机真机也是一样

代码如下:

<canvas type="2d" id="myCanvas" disable-scroll="true" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" bindtouchcancel="touchEnd" style="width: {{baseWidth}}px;height: {{baseHeight}}px;">
</canvas>


this.context.beginPath();
this.context.moveTo(10, 10);
this.context.lineTo(10, 100);
this.context.lineTo(100, 100);
this.context.lineTo(100, 10);
this.context.lineTo(10, 10);
this.context.stroke();

绘制结果

线条粗细也不一样,正方形长宽也不一样,还很模糊

回答关注问题邀请回答
收藏

1 个回答

  • 放轻松点 主角
    放轻松点 主角
    2022-01-21
    // 把你wxml上的 style去掉吧。
    
    Page({
      onReady() {
        const query = wx.createSelectorQuery()
        query.select('#myCanvas').fields({ node: true, size: true }).exec((res) => {
            const 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)
            ctx.beginPath();
            ctx.moveTo(10, 10)
            ctx.lineTo(10, 100)
            ctx.lineTo(100, 100)
            ctx.lineTo(100, 10)
            ctx.lineTo(10, 10)
            ctx.stroke()
          })
      }
    })
    

    2022-01-21
    有用 1
    回复 11
    • 雨
      2022-01-21
      感谢回复,正常了,但是style去掉怎么设置canvas的长宽呢,我需要动态设置。
      2022-01-21
      回复
    • 放轻松点 主角
      放轻松点 主角
      2022-01-21回复
      你要画什么,海报?
      2022-01-21
      回复
    • 雨
      2022-01-21
      做一个涂鸦画板
      2022-01-21
      回复
    • 放轻松点 主角
      放轻松点 主角
      2022-01-21回复
      baseWidth和baseHeight怎么获取的呢。
      2022-01-21
      回复
    • 雨
      2022-01-21回复放轻松点 主角
      baseWidth是用wx.getSystemInfo获取的windowWidth减去padding:windowWidth - 60 / 750 * windowWidth。baseHeight是用windowHeight*0.7
      2022-01-21
      回复
    查看更多(6)
登录 后发表内容