使用 Browserify 从 p5.js 导出函数

Question

首先，我有一个p5.js脚本：

//canvas.js
var p5 = require('p5')

module.exports = new p5(function () {
  this.setup = function setup () {
    this.createCanvas(700, 400)
    this.background(205)
    this.loadImage('/uploads/uploaded_image', function (img) {
      image(img, 0, 0)
    })
    this.updatePixels()
  }
  this.clearCanvas = function redraw () {
    this.background('black')
  }

一切都在一个新的 p5 对象中，这样它就可以与 browserify 捆绑在一起，因为据我所知，p5 在全局命名空间中运行。这工作正常，但我需要一个按钮可以将整个 canvas 变成黑色，因此我添加了一个新函数 clearCanvas 以将 canvas 全部重绘为黑色。我添加了 module.exports 部分，以便我可以在 p5 对象中要求并在另一个脚本中使用这个新函数。然后我在我的玉文件中添加了一个按钮：

    button(type='button', id='clear').
            Click to clear

然后我创建了一个在 p5 导出对象中需要的处理程序并使用 clearCanvas 函数 onClick:

var canvas = require('./canvas.js')

document.getElementById('clear').onclick = function () {
  canvas.clearCanvas()
}

结果在控制台出现两个错误：

bundle.js:34633 未捕获类型错误：无法设置属性 'onclick' 为 null

bundle.js:14197 p5 在创建全局函数 "clear" 时遇到问题，可能是因为您的代码已经将该名称用作变量。您可能希望将变量重命名为其他名称。

Answer 1

这里回答了这个问题：

p5.js 运行s 在全局对象中并导出不是内置到 p5 的函数，您必须在实例模式下运行 p5。这也允许您运行 p5 的多个实例。

使用 Browserify 从 p5.js 导出函数

Exporting a function from p5.js with Browserify

javascript

node.js

browserify

p5.js