javascript - 如何在组件中使用画布和 Vue？

Question

我很想以这种方式将画布添加到我的 Vue 组件中，但它不起作用。

屏幕截图上的代码结果。控制台中没有错误和警告。

我试图用画布来做document.getElementById("canvas")，<canvas id="canvas"></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>

标签： javascriptvue.jscanvasvue-component

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";