js之H5画布不显示图片的问题解决

<template>
    <view class="">
        <canvas style="" canvas-id="myCanvas" id="myCanvas"></canvas>
        <!-- <view class="container">
            <img :src="tempFilePath" />
        </view> -->
    </view>
 
</template>
 
<script>
    var that
    export default {
        data() {
            return {
                tempFilePath: ''
            }
        },
        onReady(option) {
            that = this;
            const ctx = uni.createCanvasContext('myCanvas')
            // uni.chooseImage({
            //   success: function(res){
                ctx.drawImage('../../static/sharePoster_bg.png', 0, 0, 150, 100)
                ctx.draw()
              // }
            // })
        },
        methods: {
        }
    }
</script>
 
<style lang="scss" scoped>
</style>

 

   

<template>
    <view class="">
        <canvas style="" canvas-id="myCanvas" id="myCanvas"></canvas>
        <view class="container">
            <image :src="tempFilePath" mode="widthFix"></image>
        </view>
    </view>
 
</template>
 
<script>
    var that
    export default {
        data() {
            return {
                tempFilePath: ''
            }
        },
        onReady(option) {
            that = this;
            const ctx = uni.createCanvasContext('myCanvas')
 
            ctx.drawImage('../../static/sharePoster_bg.png', 0, 0, 200, 380)
            ctx.fillStyle="#005B8C";
            ctx.font = "bold 60px Arial";
            // ctx.setFontStyle('color','#005B8C')
            ctx.fillText('A+', 15, 126)
            ctx.draw(true, () => {
                uni.canvasToTempFilePath({
                    x: 0,
                    y: 0,
                    width: 200,
                    height: 380,
                    destWidth: getApp().windowWidth,
                    destHeight: getApp().windowWidth/200*380,
                    canvasId: 'myCanvas',
                    fileType: "jpg",
                    quality: 1,
                    success(res) {
                        console.log('绘制成功-------', res)
                        uni.hideLoading();
                        that.tempFilePath = res.tempFilePath;
                    },
                    fail(err) {
                        console.log('绘制失败', err)
                    }
                });
            });
        },
        methods: {}
    }
</script>
 
<style lang="scss" scoped>
    canvas {
            background-color: #fff;
            border: 1px solid #d0d0d0;
            width: 100vw;
            height: 100vh;
            position: absolute;
            left: 100%;
        }
     
        .container {
            width: 100vw;
            align-items: center;
            overflow: auto;
            background: #fefefe;
        }
     
        .container image {
            width: 100%;
            position: absolute;
            top: 0;
        }
</style>