return ( <View className= "panel" > <View className= "panel-background" > <Canvas type= "2d" className= "panel-background-canvas " style= "z-index:-10" ref={(node) => { this .canvasNode = node }} id= "myCanvas" > <CoverView className= "panel-background-gray" ref={canvasRef}> </CoverView> </Canvas> </View> </View>
|
.panel { width : 520px ; height : 520px ; margin : 0 auto ; margin-top : 40px ; position : relative ; &-background { height : 100% ; position : relative ; background- size : 100% 100% ; &-canvas{ top : 0 ; left : 0 ; position : absolute ; display : block !important ; width : 480px ; height : 480px ; z-index : -1 ; } &- gray { top : 0 ; left : 0 ; position : absolute ; margin : 20px ; width : 480px ; height : 480px ; z-index : 1 ; border-radius: 50% ; background : blue ; } } } |
"libVersion": "2.9.3",
如上结构
在开发工具上显示如下
效果如图 红色为canvas绘制 蓝色是CoverView 的背景
以手机为主,开发者工具一直有这个bug
2d 接口 v2.9.0 起支持同层渲染,可以直接使用view
z-index是有基础课限制的,你这没有样式鬼知道啥情况啊
不是时候 coverview会在canvas上面绘制嘛 我也是刚写不太懂
大佬 在看一下
z-index 不生效 coverview 也不生效