canvas 2d 在华为Nova2下，如果设置<canvas>的宽高相等，绘制的图形位置会偏移？
发布于 6 年前 作者 fangjun 10365 次浏览 来自 问答

canvas 2d 在华为Nova2下，如果设置画布的宽高相等，绘制的图形位置会偏移。暂未发现其他机型有此问题。

微信客户端：7.0.9

设备型号：华为Nova2

wx.createSelectorQuery().select("#canvas").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.fillStyle = "#f00";
      ctx.fillRect(20, 20, 160, 160);
      ctx.fillStyle = "#0f0";
      ctx.fillRect(40, 40, 160, 160);
    });

画布长宽不相等时，绘制的图形正常显示：

<canvas type="2d" id="canvas" style="width: 200px; height:201px; border: 1px solid yellowgreen;"></canvas>

画布长宽相等时，绘制的图形位置偏移：

<canvas type="2d" id="canvas" style="width: 200px; height:200px; border: 1px solid yellowgreen;"></canvas>
1 回复

麻烦提供能复现问题的代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）

另外，请扫描下图贴一下截图

回到顶部