如何在組件中使用帶有 Vue 的畫布？

Question

我很想以這種方式將畫布添加到我的 Vue 組件中，但它不起作用。

屏幕截圖上的代碼結果。 控制台中沒有錯誤和警告。

我嘗試使用<canvas id="canvas"></canvas>來獲取 canvas document.getElementById("canvas")但它也不起作用。

如何在 Vue 組件中使用畫布？

<template>
    <div>
        <canvas
            ref="canvas"
        ></canvas>
    </div>
</template>

<script>
export default {
    name: 'levelOne',
    data: () => ({
    }),
    methods:{
        func(){
            let cvn = this.$refs.canvas;
            let ctx = cvn.getContext("2d");  
            let bg = new Image();
            bg.src = "../assets/bg.png";
            bg.onload = function() {
                    ctx.drawImage(bg, 0 ,0);
            };
        }
    },
    mounted(){
        this.func();
    }
}
</script>

Answer 1

你可以這樣試試：

<script>
import myImage from "./assets/bg.png";

export default {
    name: 'levelOne',
    data: () => ({
    }),
    methods:{
        func(){
            let cvn = this.$refs.canvas;
            let ctx = cvn.getContext("2d");  
            let bg = new Image();
            bg.src = myImage;
            bg.onload = function() {
                    ctx.drawImage(bg, 0 ,0);
            };
        }
    },
    mounted(){
        this.func();
    }
}
</script>

或者簡單地將您的圖像移動到public文件夾中，然后：

bg.src = "/bg.png";