如何在Vue组件中使用canvas？

Question

我正尝试以这种方式向我的Vue组件添加画布，但它没有起作用。
屏幕截图上的代码结果。控制台中没有错误和警告。 我试图通过<canvas id="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>

- AlexIdest

---

澄清一下... 你尝试过 getElemetById 还是 getElementById？这里有一个小笔误。 - byxor

@byxor 对不起，这只是问题中的一个打字错误。我尝试使用 getElementById。 - AlexIdest

也许你已经成功获取了画布，但是图片没有加载。你能在画布上渲染其他东西吗，比如文字？例如：ctx.font = '48px serif'; ctx.fillText('Hello world', 10, 50); - byxor

@byxor，是的，它适用于文本，但如果.png文件的路径正确，那么问题在哪里？ - AlexIdest

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

- Fab

---

谢谢，它有效了！但是将 bg.png 移动到同一个文件夹中仍然不行。你知道为什么吗？这很奇怪。 - AlexIdest

你是指公共文件夹吗？然而，在这里你可以找到更多信息：https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling - Fab