p5.js createCanvas 不再渲染。 ngOnInit 常量未被访问

Question

我的代码过去可以渲染 canvas，但现在不行了。主要问题似乎是我永远不会访问草图常量。

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

    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);
          };
        }
      }
    }

这应该呈现 canvas 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);
}

p5.js createCanvas 不再渲染。 ngOnInit 常量未被访问

p5.js createCanvas no longer rendering. ngOnInit const not being accessed

javascript

typescript

p5.js

angular