收藏
回答

canvas 2d 在华为Nova2下,如果设置<canvas>的宽高相等,绘制的图形位置会偏移?

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>




最后一次编辑于  2019-12-10
回答关注问题邀请回答
收藏

1 个回答

登录 后发表内容
问题标签