如何让处理脚本在 div 中运行答案

【问题标题】：How to get a processing script to run in a div如何让处理脚本在 div 中运行
【发布时间】：2017-09-16 17:43:12
【问题描述】：

我正在制作一个需要将字符串转换为 processing.js 脚本的程序。目前，下面的代码创建了一个<script type="text/processing" data-processing-target="canvas"> 标签并在其中添加了一个字符串，但我如何让它运行呢？

 function runProcessing() {
            var input = "<script type=\"text/processing\" data-processing-target=\"canvas\">";
            input += document.getElementById("userInput").value;
            document.getElementById('processingCode').innerHTML = input;
            console.log(document.getElementById('processingCode').innerHTML);
        }

简而言之，我该如何打开这个...

void setup() {}

进入这个...

<script type="text/processing" data-processing-target="canvas">
void setup() {}
</script>

然后运行它。

【问题讨论】：

我真的不确定你在问什么。处理需要canvas 才能工作。如果您愿意，可以将 canvas 放入 div 中。你能发一个minimal reproducible example吗？您能否更具体地说明您正在尝试做什么？
您的流程脚本使用的是哪个库？

标签： javascript jquery html dom processing.js

【解决方案1】：

您只需要创建一个新的处理实例，传入目标画布和草图源。您不需要实际将 html 添加到 dom 中

var canvas = document.getElementById('yourCanvasID');
var source = document.getElementById("userInput").value;

var instance = new Processing(canvas, source);

但如果您确实希望将其添加为 html，您应该可以在添加 html 后调用 Processing.reload() 以重新初始化草图

【讨论】：