使用.pde单击processing.js后加载processing.js文件
就在几天前，我发现了processing.js，我一直在为它而奋斗。我正在努力使画布在我按下按钮的时候出现。例如，此代码工作正常，并在单击后创建一个画布：
<!DOCTYPE HTML>
<html>
<script src="/js/processing.js"></script>
<head>
</head>
<body>
<input type="button" value="Cambiar imagen" id="clearbutton"
onclick="canvas();">
<script>
function canvas(){
var mycanvas = document.createElement("canvas");
mycanvas.id = "mycanvas";
document.body.appendChild(mycanvas); }
</script>
</body>
</html>然后，我尝试这样修改代码：
function canvas(){
var mycanvas = document.createElement("canvas");
mycanvas.id = "mycanvas";
document.body.appendChild(mycanvas);
mycanvas.data-processing-sources = "/var/www/html/processing/jS2.pde"
}但是它抛出了一个错误，上面写着:无效的左手符号。
于是我尝试了如下：
<script type="text/processing" data-processing-target="mycanvas">
void setup()
{
size(300,300);
background(0);
fill(255);
noLoop();
PFont fontA = loadFont("courier");
textFont(fontA, 14);
}
void draw(){
text("Hello!",20,20);
}
</script>但是这只是创建一个白色画布，它忽略了处理脚本。我也不是很擅长javascript，所以如果你回答，谢谢。我已经检查了processing.js的参考文件，但是很难跟踪它。
根据评论中的建议，我尝试：
<input type="button" value="Cambiar imagen" id="clearbutton" onclick="canvas();">
<script>
function canvas(){
var mycanvas = document.createElement("canvas");
mycanvas.id = "mycanvas";
document.body.appendChild(mycanvas);
var canvas = "/var/www/html/processing/jS2.pde"
var sources = canvas.getAttribute("data-processing-sources").split(/\s+/);
Processing.loadSketchFromSources(canvas, sources);
}
</script>这就产生了一个错误: canvas.getAttribute不是画布上的函数。
并尝试：
<body>
<input type="button" value="Cambiar imagen" id="clearbutton" onclick="loadSketchOnContentSwap();">
<script>
function loadSketchOnContentSwap() {
var canvas = "/var/www/html/processing/jS2.pde"
var sources = canvas.getAttribute("data-processing-sources").split(/\s+/);
Processing.loadSketchFromSources(canvas, sources);
}
</script>
</body>也许我漏掉了什么，或者没有把代码放在正确的位置？
这是到小提琴的链接：https://jsfiddle.net/truxx/khht29zx/1/
不过，/There是个问题，这段代码在我的chrome浏览器中创建了一个灰色画布，但是相同的代码不会在小提琴上这样做。/
回答 1
Stack Overflow用户
发布于 2017-07-12 01:50:52
感谢您尝试发布一个JSFiddle，但是在将来，请确保您发布的代码会产生与您所看到的完全相同的错误。您发布的JSFiddle包含了几个错误:没有用引号括起来的字符串，没有加载Processing.js库，还有一些JSFiddle设置的其他问题。在发帖之前请试着把它们弄直。您需要确保代码运行，并向我们展示您正在看到的相同的东西。
尽管如此，这里是一个指向已加载Processing.js库的JSFiddle的链接，包含您需要使用的设置，以及我建议您尝试的代码：
var mycanvas = document.createElement("canvas");
mycanvas.id = "mycanvas";
document.body.appendChild(mycanvas);
Processing.loadSketchFromSources(mycanvas, 'PATH/TO/YOUR/SKETCH.pde');--请注意，，我刚才链接的JSFiddle仍然包含一个错误，因为您不能只从任何随机的URL加载.pde文件。它必须位于相同的域上，或者您必须修改您的CORS设置。
如果您有后续问题，请在一个新的问题帖子中发布，并确保您将问题缩小到实际演示问题的MCVE。祝好运。
https://stackoverflow.com/questions/45023975
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号