收藏
回答

在canvas上使用行内样式backgroundImage,ios上无法显示图片其他手机能正常显示?

<canvas

                        id="lipCanvas"

                        canvas-id="lipCanvas"

                        class="lipCanvas"

                        disable-scroll="{{true}}"

                        style="width: 100%; height: 100%;background-image: url('{{photoSrc}}'); background-repeat:no-repeat;background-size:contain;-moz-background-size:contain;background-position-x:center;background-position-y: center">

</canvas>

其他机型都能显示出来这个画布上的背景图片,不知道iphone为什么不显示,请问有解决办法吗

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

2 个回答

  • 放轻松点 主角
    放轻松点 主角
    2021-12-03

    其他方法就是 canvas 用2d,然后image设置absolute定位 ,z-index大于0

    <view class="canvas-box">
      <canvas type="2d" />
      <image src="xxx" class="poster" />
    </view>
    
    
    .canvas-box {
      width: 600rpx;
      height: 400rpx;
      position: relative;
      overflow: hidden;
    }
    .poster {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 99;
    }
    
    2021-12-03
    有用
    回复 6
    • 冬枳_
      冬枳_
      2021-12-03
      感谢。这样确实能侧面解决我提的问题。是我没有讲清楚,这样image会遮挡我后续在canvas上画的东西。我还是想显示canvas的背景图片
      2021-12-03
      回复
    • 放轻松点 主角
      放轻松点 主角
      2021-12-03回复冬枳_
      好的,我写个demo试下。
      2021-12-03
      回复
    • 放轻松点 主角
      放轻松点 主角
      2021-12-03回复冬枳_
      我测试正常,之前看你写的poster,以为是盖在上面的poster:
      https://developers.weixin.qq.com/s/16YiogmQ7Uvj
      2021-12-03
      回复
    • 放轻松点 主角
      放轻松点 主角
      2021-12-03回复放轻松点 主角
      额,看错了photoSrc,我还以为是posterSrc。
      2021-12-03
      回复
    • 冬枳_
      冬枳_
      2021-12-03
      感谢。对比了一下你提供的代码发现这个问题应该是图片的url导致的。我是选取的本地图片,网络图在ios能显示。放在行内样式只能让非ios显示出来。
      2021-12-03
      回复
    查看更多(1)
  • DC ιονе
    DC ιονе
    2021-12-03

    同问,求解

    2021-12-03
    有用
    回复
登录 后发表内容