收藏
回答

在canvas绘图时坐标不正确

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug canvas 微信安卓客户端 7.0.22 2.14.3

canvas要想在浏览器正常显示的话要写成以下这种形式

<canvas id="c1" height="300px" width="300px" style="background-color: yellow"></canvas>

写成以下两种方式绘图时坐标会错误

<canvas id="c1" style="height: 300px;width: 300px;background-color: yellow"></canvas>



<canvas id="c1"></canvas>
#c1{
            background-color: yellow;
            height: 300px;
            width: 300px;
  }


官方可参考这篇文章:https://www.jb51.net/html5/147328.html

而在微信小程序中直接给canvas通过width,height赋值时是无效的,另外两种添加样式方法绘图时坐标会不正确,这就造成无法在canvas中正常绘图,希望官方能修复一下这个问题

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

3 个回答

  • 春伟
    春伟
    2021-05-21

    最新版本同样发现这个问题 是否有解决方案了?

    2021-05-21
    有用
    回复
  • Derek
    Derek
    2021-01-10

    你好,复现代码可看一下我在这篇帖子中的回复,点击下方链接即可查看

    https://developers.weixin.qq.com/community/develop/doc/00066ad6aa8c20f16d8bd5cff5b000?jumpto=comment&commentid=0006869d3546608c6e8be07d15b8

    2021-01-10
    有用
    回复
  • Cjiang
    Cjiang
    2021-01-09

    请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    2021-01-09
    有用
    回复 7
    • Derek
      Derek
      2021-01-10
      在wxjs页面添加以下代码,然后结合上面帖子中的三种情况即可查看BUG
      2021-01-10
      回复
    • Cjiang
      Cjiang
      2021-01-10回复Derek
      请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html),坐标不准确是指?详细描述下情况。
      2021-01-10
      回复
    • Derek
      Derek
      2021-01-10
      复现代码:https://developers.weixin.qq.com/s/4j5DZgmq7SnK
      展示图:
      按理说红色矩形的左上角离画布的左上角都是20px,并且红色矩形的宽为150px,高为40px才对,你看一下显示效果,这很明显不对呀
      2021-01-10
      回复
    • Derek
      Derek
      2021-01-10
      我测试了好多遍,发现只要把canvas的宽和高设置为2:1的比例关系,在此画布上绘制的矩形距离左上角位置正确,并且宽和高也会正确显示
      2021-01-10
      回复
    • Derek
      Derek
      2021-01-16
      你好,你们官方这边怎么解决的呢
      2021-01-16
      回复
    查看更多(2)
登录 后发表内容
问题标签