Javascript 动态地；“卸载”；从画布处理JS草图

我使用一些javascript允许用户在单击画布元素时动态加载草图，使用：

Processing.loadSketchFromSources（'canvas_id'，['sketch.pde']）

如果我第二次（或第三次…）调用Processing.loadSketchFromSources（…），它会将第二次（或第三次…）.pde文件加载到画布上，这是我所期望的

我希望用户能够单击另一个链接来加载不同的草图，从而有效地卸载上一个草图。有没有一种方法我可以调用（或者我可以使用的技术）来检查处理是否有另一个草图正在运行，如果有，告诉它先卸载它

是否存在我忽略的某种Processing.unloadSketch（）方法？我可以简单地删除canvas DOM对象并重新创建它，但（1）在需要针时似乎使用锤子，（2）它会导致屏幕闪烁，我希望避免这种情况

我不是JS专家，但我已经尽了最大努力查看processing.JS源代码，以了解可能存在哪些其他函数，但我遇到了麻烦。我想也许我可以看看Processing.Sketches.length，看看是否已经加载了某些内容，但简单地将其从数组中弹出似乎不起作用（我认为不会）

---

我使用的是ProcessingJS 1.3.6。

我不熟悉Processing.js，但该站点的示例代码如下：

var canvas = document.getElementById("canvas1");
// attaching the sketchProc function to the canvas
var p = new Processing(canvas, sketchProc);
// p.exit(); to detach it

因此，在您的情况下，您希望在创建第一个实例时保留该实例的句柄：

var p1 = Processing.loadSketchFromSources('canvas_id', ['sketch.pde']);

当您准备“卸载”并加载新草图时，我猜（但不知道）您需要自己清理画布：

p1.exit();
var canvas = document.getElementById('canvas_id'); 
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
// Or context.fillRect(...) with white, or whatever clearing it means to you

然后，从事物的声音来看，您可以自由附加另一个草图：

var p2 = Processing.loadSketchFromSources('canvas_id', ['sketch2.pde']);

---

再说一次，我实际上并不熟悉该库，但从文档中可以看出这很简单。

如果有人来寻找解决方案，下面是我所做的工作。请注意，这是放在一个闭包中的（为了简洁起见，这里不包括）——因此this.launch=function（），诸如此类。。。YMMV

/**
 * Launches a specific sketch. Assumes files are stored in
 * the ./sketches subdirectory, and your canvas is named g_sketch_canvas
 * @param {String} item The name of the file (no extension)
 * @param {Array} sketchlist Array of sketches to choose from
 * @returns true
 * @type Boolean
 */
this.launch = function (item, sketchlist) {
    var cvs = document.getElementById('g_sketch_canvas'),
        ctx = cvs.getContext('2d');
    if ($.inArray(item, sketchlist) !== -1) {
        // Unload the Processing script
        if (Processing.instances.length > 0) {
            // There should only be one, so no need to loop
            Processing.instances[0].exit();
            // If you may have more than one, then use this loop:
             for (i=0; i < Processing.instances.length; (i++)) {
            //  Processing.instances[i].exit();
            //}
        }
        // Clear the context
        ctx.setTransform(1, 0, 0, 1, 0, 0);
        ctx.clearRect(0, 0, cvs.width, cvs.height);
        // Now, load the new Processing script
        Processing.loadSketchFromSources(cvs, ['sketches/' + item + '.pde']);
    }
    return true;
};

/**
*启动特定草图。假定文件存储在
*在./sketchs子目录中，画布名为g_sketch_canvas
*@param{String}item文件名（无扩展名）
*@param{Array}sketchlist可供选择的草图数组
*@返回真值
*@type布尔值
*/
this.launch=函数（项目，草图列表）{
var cvs=document.getElementById（'g_sketch_canvas'），
ctx=cvs.getContext（'2d'）；
如果（$.inArray（项目，草图列表）！=-1）{
//卸载处理脚本
如果（Processing.instances.length>0）{
//应该只有一个，所以不需要循环
正在处理。实例[0]。退出（）；
//如果可能有多个，则使用此循环：
对于（i=0；i

从processing.js 1.4.8开始，Andrew接受的答案（以及我在这里找到的其他答案）似乎不再有效

这就是我的工作原理：

    var pjs = Processing.getInstanceById('pjs');
    if (typeof pjs !== "undefined") {
      pjs.exit();
    }

    var canvas = document.getElementById('pjs')
    new Processing(canvas, scriptText);

---

其中

pjs

是运行scrips的画布元素的id。

感谢您的回答。。这让我得到了75%的回报。。。在Javascript中使用处理有两种“模式”：（1）动态加载Processing.pde文件，或（2）在JS中编写处理脚本。“致命缺陷”是.loadSketchFromSources（）似乎没有返回可用的句柄。相反，您必须查看Processing.instances.length以确定当前正在运行。如果是，则可以调用Processing.instances[0]。exit（）。。。前提是只有一个脚本正在运行。（对不起，我不能+1你的答案——我还没有足够的分数）。回答你自己的问题做得很好。欢迎使用堆栈溢出：）您好，我有一个问题，Processing.instances.length返回（0），尽管我的网页上有两个草图运行良好。在卸载函数之前加载草图时，您是否必须填充Processing.instances？此外，这张罚单在这里似乎很重要：很抱歉反驳这一点，但问题中的代码似乎在1.4.8中起作用，而这个答案似乎不起作用。我离这真的很远，我无法告诉您比我上面写的更多的内容。我只能说：问题中没有代码。。。所以我不能真正检查你的评论是否正确。