收藏
回答

如何让canvas绘画的图形产生高斯模糊在手机端正常显示?

<!-- wxml -->
<canvas canvas-id="lightness" class="lightness"></canvas>

<!-- wxss -->
.lightness {
  width: 100%;
  height: 100%;
  opacity: 0.5;
  filter: blur(20rpx);
}

<!-- js -->
const ctx = wx.createCanvasContext('lightness')
ctx.arc(100, 85, 90, Math.PI * 0.78, Math.PI * 1.22)
ctx.lineTo(100, 38)
ctx.lineTo(100, 135)
ctx.setFillStyle("#ff6600")
ctx.fill()
ctx.draw()

通过canvas绘画一个形状,通过设置wxss高斯模糊,在微信模拟器效果正常,如下:

而在手机上却没有该效果:

目的:需要手机端也正常显示高斯模糊效果,请问怎么解决?

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

1 个回答

  • Cjiang
    Cjiang
    2021-01-08

    你好,麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    2021-01-08
    有用
    回复 4
    • 天赋异禀
      天赋异禀
      2021-01-08
      机型:魅族17 微信版本:7.0.22 系统版本号:Flyme 8.2.0.0.A(Android 10)
      机型:iPhone7 微信版本:7.0.18 系统版本号:12.4
      应该是所有手机微信都无法正常显示该效果
      代码片段:https://developers.weixin.qq.com/s/Iwx4rcmX7Znr
      2021-01-08
      回复
    • Cjiang
      Cjiang
      2021-01-11回复天赋异禀
      应该是手机不支持,使用下其他css的进行适配看看。
      2021-01-11
      回复
    • 天赋异禀
      天赋异禀
      2021-01-11回复Cjiang
      请教,还有什么css可以有这样效果?
      2021-01-11
      回复
    • Cjiang
      Cjiang
      2021-01-11回复天赋异禀
      用下  box-shadow试试?
      2021-01-11
      回复
登录 后发表内容
问题标签