公告列表
公告列表
收藏
回答

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 个回答

  • 灵芝
    灵芝
    2019-12-10

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

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


    2019-12-10
    有用
    回复 5
    • By
      By
      2019-12-10
      代码片段：https://developers.weixin.qq.com/s/3ORPIvmo79dP
      2019-12-10
      赞
      回复
    • 灵芝
      灵芝
      2019-12-11回复By
      只有该机型有问题么？这边使用华为Nova3e和小米、iPhone测试都没有复现问题
      2019-12-11
      赞
      回复
    • By
      By
      2019-12-12回复灵芝
      我这边试过华为荣耀20、华为荣耀note10、小米、vivo、iphone都没有这个问题，只有华为Nova2才有这个问题。除了华为Nova2的安卓版本是8.0，其他安卓版本都是9.0。
      2019-12-12
      赞
      回复
    • 灵芝
      灵芝
      2019-12-12回复By
      升级一下系统版本再试试看呢
      2019-12-12
      赞
      回复
    • 栀夏暖阳
      栀夏暖阳
      2020-08-17
      你这个回答等于没说
      2020-08-17
      赞 1
      回复
请 登录 后发表内容
相关文档
问题标签
canvas位置绘制客户端华为