收藏
回答

canvas透明画板

框架类型 问题类型 操作系统 工具版本
小程序 Bug macOS 2203251

描述:canvas透明画板getImageData数据后putImageData到另一个画板 导致在开发工具上新画板putImageData数据背景不透明。在真机上却又透明,如下图

canvas.getContext('2d',{ alpha: true });

const imgData1 = ctx1.getImageData(0, 0, canvas.width, canvas.height)

ctx.putImageData(imgData1, canvas.width, canvas.height);

mac工具图

ios真机图

最后一次编辑于  2022-03-30
回答关注问题邀请回答
收藏

1 个回答

  • cover
    cover
    2022-03-30

    你好,这边工具上实现表现是符合标准的。客户端的实现反而是不太规范。

    这里 putImageData 的实现效果应该是工具目前的表现,会去覆盖区域,而不是和真机一样出现交叠的效果。

    如果需要实现背景透明,按照标准应该是开发者去操作 imgdata 像素数据进行背景色处理实现。


    2022-03-30
    有用
    回复 8
    • Uncle
      Uncle
      2022-03-30
      putImageData过去offcanvas的背景是透明的 canvas 。 透穿了原始canvas标签的画板。显示出来了page页面底色白色
      2022-03-30
      回复
    • Uncle
      Uncle
      2022-03-30
      2022-03-30
      回复
    • Uncle
      Uncle
      2022-03-30回复Uncle
      offcanvas透穿了在线canvas画板  直接显示出body 背景色蓝色????
      2022-03-30
      回复
    • cover
      cover
      2022-03-31回复Uncle
      这边从offcanvas 拿到的是像素数据,然后通过 putImageData 到任何的 canvas 上。都是会把对应的位置修改成 像素数据 的内容。你的像素数据是透明的,那就会覆盖成透明的。所以就显示底层的背景色。putImageData 和是不是离屏本屏没关系。就是操作获取和设置像素数据。所以工具上的表现和 web 标准是一致的,是符合规范的。但真机的实现是有差异的不太对
      2022-03-31
      回复
    • cover
      cover
      2022-03-31回复Uncle
      后续会考虑将真机去对齐 web 标准即工具。
      2022-03-31
      回复
    查看更多(3)
登录 后发表内容