javascript - p5.j​​s和vue-创建 Canvas

我正在尝试将p5.js库导入我的vue应用程序。我尝试了this，但是并没有太大帮助。

我已经从CDN导入了p5，并且都已正确导入:

created() {
    console.log(window.p5); // this works
},

那么我将如何实际创建 Canvas ？我试着做

created() {
    console.log(window.p5);
    this.setup();
},
methods: {
    setup() {
        window.p5.createCanvas(640, 480);
    },
},

和

created() {
    console.log(window.p5);
    window.p5.createCanvas(640, 480);
},

似乎都不起作用

最佳答案

使用npm包here
import P5 from 'p5'
创建你的容器

<div id="canvas"></div>

脚本将被注入(inject)div

created() {
    const sketch = s => {
        let w = window.innerWidth;
        let h = window.innerHeight;

        s.setup = () => {
            s.createCanvas(w, h);
        };

        s.draw = () => {
            s.background(33, 33, 33);
            s.ellipse(50, 50, 100, 100);

            // call your method:
            s.yourMethod(x, y);
        };

        // create methods:
        s.yourMethod = (x, y) => {
            // your method
        }
    }

    let canvas = new P5(sketch, 'canvas');
}

关于javascript - p5.j​​s和vue-创建 Canvas ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/61852082/