p5.js 与 Angular 集成/不使用全局函数

Question

在教程和 youtube 频道中，所有示例都使用 sketch.js & 全局函数 & canvas / 视频标签由库自动创建。有没有办法手动创建 "p5.js context"，将其传递给视频和 canvas 标签并在某些全局对象上使用 API？我想在组件

中编写 p5.js 代码

Answer 1

我对Angular一无所知，但听起来您正在P5.js.[=12中寻找实例模式 =]

有关详细信息，请参阅 here，但它看起来像这样：

var s = function( sketch ) {

  var x = 100; 
  var y = 100;

  sketch.setup = function() {
    sketch.createCanvas(200, 200);
  };

  sketch.draw = function() {
    sketch.background(0);
    sketch.fill(255);
    sketch.rect(x,y,50,50);
  };
};

var myp5 = new p5(s);

您可能需要花点时间才能将外部对象传递给它，但这些是基础知识。

p5.js 与 Angular 集成/不使用全局函数

p5.js integration with Angular / not using global functions

p5.js

angular