[代码]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 的背景 [图片]

[代码]export [代码][代码]default[代码] [代码]class ProgressPanel extends Component {[代码][代码] [代码] [代码]    [代码][代码]componentDidMount () {[代码][代码]        [代码][代码]console.log([代码][代码]'test componentDidMount'[代码][代码])[代码][代码]        [代码][代码]const query = wx.createSelectorQuery().[代码][代码]in[代码][代码]([代码][代码]this[代码][代码])[代码][代码]        [代码][代码]query.select([代码][代码]'#myCanvas'[代码][代码])[代码][代码]          [代码][代码].fields({ node: [代码][代码]true[代码][代码], size: [代码][代码]true[代码] [代码]})[代码][代码]          [代码][代码].exec((res) => {[代码][代码]            [代码][代码]console.log([代码][代码]'test ProgressPanel res 没执行到这里'[代码][代码], res)[代码][代码]            [代码][代码]const canvas = res[0].node[代码][代码]            [代码][代码]const ctx = canvas.getContext([代码][代码]'2d'[代码][代码])[代码][代码]    [代码] [代码]            [代码][代码]const dpr = wx.getSystemInfoSync().pixelRatio[代码][代码]            [代码][代码]canvas.width = res[0].width * dpr[代码][代码]            [代码][代码]canvas.height = res[0].height * dpr[代码][代码]            [代码][代码]ctx.scale(dpr, dpr)[代码][代码]    [代码] [代码]            [代码][代码]ctx.fillRect(0, 0, 100, 100)[代码][代码]          [代码][代码]})[代码][代码]    [代码][代码]}[代码]  [代码]    [代码][代码]public render() {[代码][代码]        [代码][代码]return[代码] [代码]([代码][代码]            [代码][代码]<View className=[代码][代码]"panel"[代码][代码]>[代码][代码]                [代码][代码]<View className=[代码][代码]"panel-background"[代码][代码]>[代码][代码]                    [代码][代码]<View id=[代码][代码]"canvas_container"[代码] [代码]className=[代码][代码]"panel-background-gray"[代码][代码]>[代码][代码]                        [代码][代码]<canvas style=[代码][代码]'width: 300px; height: 200px;'[代码] [代码]canvas-id=[代码][代码]'myCanvas'[代码] [代码]/>[代码][代码]                    [代码][代码]</View>[代码] [代码]                [代码][代码]</View>[代码] [代码]            [代码][代码]</View>[代码][代码]        [代码][代码])[代码] [代码]    [代码][代码]}[代码][代码]    [代码] [代码]}[代码] 获取失败 没有拿到canvas