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

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

  • TNT
    TNT
    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
      赞
      回复
    • TNT
      TNT
      2021-12-03回复冬枳_
      好的，我写个demo试下。
      2021-12-03
      赞
      回复
    • TNT
      TNT
      2021-12-03回复冬枳_
      我测试正常，之前看你写的poster，以为是盖在上面的poster：
      https://developers.weixin.qq.com/s/16YiogmQ7Uvj
      2021-12-03
      赞
      回复
    • TNT
      TNT
      2021-12-03回复TNT
      额，看错了photoSrc，我还以为是posterSrc。
      2021-12-03
      赞
      回复
    • 冬枳_
      冬枳_
      2021-12-03
      感谢。对比了一下你提供的代码发现这个问题应该是图片的url导致的。我是选取的本地图片，网络图在ios能显示。放在行内样式只能让非ios显示出来。
      2021-12-03
      赞
      回复
    查看更多(1)
  • DC ιονе
    DC ιονе
    2021-12-03

    同问，求解

    2021-12-03
    有用
    回复
请 登录 后发表内容
相关问题
相关文档