支持canvas 2d的怎么改啊

注意canvas-id和id都需要填写。

<template>  
    <view class="container">  
        <canvas type="2d" style="width: 300px; height: 200px;" id="firstCanvas" canvas-id="firstCanvas" @error="canvasIdErrorCallback"></canvas>  
    </view>  
</template>  

<script>  
import store from '@/store';  

export default {  
    name: "board",  

    computed: {  
        phoneInch() {  
            // fetch it from localStorage, but not network.  
            return store.state.global.phoneInch;  
        },  
    },  

    onLoad() {  
        console.debug("board load");  
    },  

    onReady: function (e) {  
        const query = wx.createSelectorQuery()  
        query.select('#firstCanvas')  
            .fields({ node: true, size: true })  
            .exec((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)  
            });  
    },  
    methods: {  
        canvasIdErrorCallback: function (e) {  
            console.error(e.detail.errMsg)  
        }  
    }  
}  
</script>  

<style scoped>  
.container{  
    width: 100%;  
    height: 100%;  
}  
</style>