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在全局命名空间中运行。这工作正常，但我需要一个按钮，将整个画布变黑，所以我添加了一个新功能clearCanvas，用黑色重绘画布。我添加了module.exports部分，以便我可以在p5对象中使用并在另一个脚本中使用这个新函数。然后我在我的玉文件中添加了一个按钮：

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

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

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

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

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

bundle.js：34633 Uncaught TypeError：无法设置属性＆＃39; onclick＆＃39;为null

bundle.js：14197 p5在创建全局函数时出现问题＆＃34;清除＆＃34;，可能是因为您的代码已经将该名称用作变量。您可能希望将变量重命名为其他内容。

Answer 1

这个问题在这里得到解答：

Exporting p5.js function with Browserify

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

使用Browserify从p5.js导出函数

1 个答案: