p5.j​​s createCanvas不再呈现。 ngOnInit const未被访问

Question

我的代码曾经用于渲染画布，但是现在不起作用了。主要问题似乎是我从未访问过草图const。

今天早上我有一个不错的小项目正在运行，但是在我没有意识到之前就删除了它。

    import { Component, OnInit } from '@angular/core';
    import * as p5 from 'p5';

    @Component({
      selector: 'app-sketch',
      templateUrl: './sketch.component.html',
      styleUrls: ['./sketch.component.css']
    })
    export class SketchComponent implements OnInit {

      constructor() { }

      ngOnInit() {
        const sketch = (s) => {
          debugger;
          s.preload = () => {
          }
          s.setup = () => {
           s.createCanvas(400,400);
          };
          s.draw = () => {
             s.background(51);
          };
        }
      }
    }

这应该渲染一个400x400的画布，但是它什么也不做。

Answer 1

您忘记了在ngOnInit中调用p5：

 p5 : any;
 ngOnInit() {
  const sketch = (s) => {
      debugger;
      s.preload = () => {
      }
      s.setup = () => {
       s.createCanvas(400,400);
      };
      s.draw = () => {
         s.background(51);
      };
    }
  this.p5 = new p5(sketch);
}