p5.js和vue-创建画布

Question

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

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

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

那么我将如何实际创建画布？我尝试过

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

和

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

似乎都不起作用

Answer 1

使用npm软件包here

import P5 from 'p5'

创建您的容器

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

脚本将被注入到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');
}