const ctx = wx.createCanvasContext(this.canvasId, this)

删掉this参数试试

请具体描述问题出现的流程，并提供能复现问题的简单代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）。

改好之后发现，3.7.11的灰度版本中修复了这个问题， 那我发不发新版呢！

就是 wepy-antv-f2 的包替换成 @antv/wx-f2 的包的写法（抄到自己的项目里）， 然后安装一下@antv/f2的依赖改写一下！

哎， 老项目看起来真费劲

你好，请问解决了吗，我也遇到同样的问题

小程序不支持在组件里面渲染canvas

子组件代码如下
template>
    <canvas 
        wx:if="{{canvasId}}"
        canvas-id="{{canvasId}}"
        class="f2-canvas"
        style="width: {{width}}rpx; height: {{height}}rpx"
        @touchstart="touchStart" 
        @touchmove="touchMove"
        @touchend="touchEnd"
        @longtap="press">
    </canvas>
</template>
<script>
    import wepy from 'wepy'
    import Renderer from 'mini-program-utils/dist/f2/renderer'


    const sysInfo = wepy.getSystemInfoSync()
    const radio = sysInfo.windowWidth / 750


    export default class F2Canvas extends wepy.component {
        props = {
            canvasId: String,
            width: String,
            height: {
                type: [Number, String],
                default: 504
            },
            opts: Object,
            chartData: Array
        }


        canvas = null


        onLoad () {
            if (!this.opts) {
                console.warn(
                    '组件需绑定 opts 变量，例：<ff-canvas id="mychart-dom-bar" ' +
                        'canvas-id="mychart-bar" opts="{{ opts }}"></ff-canvas>'
                )
                return
            }


            const version = wx.getSystemInfoSync().SDKVersion;
            console.log('微信基础库版本:', version);


            if (!this.opts.lazyLoad) {
                this.init()
            }
        }


        init (callback) {
            const version = wx.version.version.split('.').map(n => parseInt(n, 10))
            const isValid =
                version[0] > 1 ||
                (version[0] === 1 && version[1] > 9) ||
                (version[0] === 1 && version[1] === 9 && version[2] >= 91)
            if (!isValid) {
                console.error('微信基础库版本过低，需大于等于 1.9.91。')
                return
            }
            const ctx = wx.createCanvasContext(this.canvasId, this)
            this.canvas = new Renderer(ctx)


            this.chart = this.opts.onInit(
                this.canvas,
                this.width * radio,
                this.height * radio,
                this.chartData
            )
        }


        methods = {
            handleError (e) {
                console.error(e)
            },


            touchStart (e) {
                if (this.canvas) {
                    this.canvas.emitEvent('touchstart', [e])
                }
            },


            touchMove (e) {
                if (this.canvas) {
                    this.canvas.emitEvent('touchmove', [e])
                }
            },


            touchEnd (e) {
                if (this.canvas) {
                    this.canvas.emitEvent('touchend', [e])
                }
            },
            press (e) {
                if (this.canvas) {
                    this.canvas.emitEvent('press', [e])
                }
            }
        }
    }
</script>
父组件主要代码如下
 <F2Canvas
                :opts="chartOpts"
                hidden="{{hideChart}}"
                canvasId="netWorthChart"
                width="740"
                height="572" />

chartOpts: {
                onInit: (canvas, width, height, chartData) => {
                    chart = this.initChart(chart, canvas, width, height, chartData)
                }
            },


initChart (chart, canvas, width, height, chartData) {
            chart = new F2.Chart({
                el: canvas,
                width,
                height,
                animate: false
            })


            chart.source(chartData, {
                value: {
                    tickCount: 5
                }
            })


            chart.scale('key', {
                type: 'timeCat',
                sortable: false,
                tickCount: 3,
                // mask: 'M-DD'
            })
            chart.tooltip({
                showCrosshairs: true,
                showItemMarker: false,
                onShow: ({ items }) => {
                    this.setValue(items[0].value)


                    items[0].name = items[0].origin.date // 显示日期
                    items[0].value = null // 显示日期


                    /* tooltip 默认会显示两次
                    * 因为 items 长度为2 （chart.area() 和 chart.line() 同时使用导致）
                    * */
                    items.splice(1, 1)
                }
            })


            const textStyle = {
                fontWeight: '400',
                fontSize: 11,    
                fill: '#999',
            }
             chart.axis('key', {
                label: textStyle
            })
            chart.axis('key', {
                label: function label(text, index, total) {
                    const textCfg = {}
                    if (index === 0) {
                        textCfg.textAlign = 'left'
                    } else if (index === total - 1) {
                        textCfg.textAlign = 'right'
                    }
                    return textCfg
                }
            })
            chart.axis('value', {
                label: textStyle,
                grid: {
                    stroke: '#eaebee'
                }
            })


            chart.area().position('key*value')
            chart.line().position('key*value')
                .color('#5B8FF9')
                .style({
                    lineWidth: 1
                })


            // chart.render()


            return chart
        }