收藏
回答

canvas绘制scale会重复叠加

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

canvas绘制图片的时候使用的是最新的Canvas 2D接口进行绘制,按官方给的示例,多次绘制发现scale在真机上会叠加,开发者工具不会。

每次绘制前都重新设置了canvas的宽高,绘制完成之后也调用clearRect清空了。

const dpr = wx.getSystemInfoSync().pixelRatio
canvas.width = res[0].width * dpr
canvas.height = res[0].height * dpr
ctx.scale(dpr, dpr) // 第一次点击绘制放大正常,第二次点击会保留第一次放大的基础上再次放大,重复点击多次会一直放大下取,只在真机上会出现Adiord和iOS都是

// 目前解决办法是
// 通过setData来控制canvas是否出现在页面上,生成前让页面生成canvas,canvas画完之后把canvas移除掉。
最后一次编辑于  2020-06-11
回答关注问题邀请回答
收藏

3 个回答

  • 陆家骏
    陆家骏
    2022-09-04

    android 6.0.1的手机有这个问题,但IOS、android 7.1.2没这个问题!估计需要读取android版本号,实现兼容。

    2022-09-04
    有用
    回复
  • 发飙的蜗牛
    发飙的蜗牛
    2020-10-27

    问题解决了么? 只绘制一次还是有问题啊

    2020-10-27
    有用
    回复
  • 訾康威
    訾康威
    2020-06-11

    我也遇到了这个问题,多次调用倍数相乘,一直没找到解决方法

    2020-06-11
    有用
    回复 8
    • 周飞
      周飞
      2020-06-11
      办法就是用一个值控制canvas是否存在页面上,生成完成之后把canvas干掉,生成之前让canvas出来。
      2020-06-11
      回复
    • 訾康威
      訾康威
      2020-06-11回复周飞
      能发个代码片段吗?
      2020-06-11
      回复
    • 周飞
      周飞
      2020-06-11回复訾康威
      https://developers.weixin.qq.com/s/livWp1mB7mih
      2020-06-11
      回复
    • 訾康威
      訾康威
      2020-06-11回复周飞
      我这个是canvas 2d画的线条,用不了
      2020-06-11
      回复
    • 訾康威
      訾康威
      2020-06-11回复周飞
      解决了
      if(this.data.flag==true){
      ctx.scale(dpr, dpr)
      this.setData({
      flag:false
      })
      }
      用一个变量控制,只让他调用一次
      2020-06-11
      2
      回复
    查看更多(3)
登录 后发表内容
问题标签