Question

目前，我在画布上使用processingjs作为草图。但截至目前，我希望能够点击一个更改画布中草图的按钮。所以我可以通过使用jQuery更改数据源来解决这个问题。好吧，这不起作用，因为处理只在加载时读取pde文件。所以这是我的代码：
HTML：

<html>
    <head>
        <script src="jQuery.js"></script>
        <script src="processing.min.js"></script>
        <script src="main.js"></script>
        <link rel="stylesheet" type="text/css" href="stylesheet.css">
    </head>
    <body>
        <div id="canvas">
            <canvas id="canvas1" data-processing-sources="anything.pde"></canvas>
        <div id="buttons">
            <div>
                <button id="clickMe">?</button>
            </div>
        </div>
        </body>
</html>

的jQuery：

$(document).ready(function(){   
    $('#clickMe').click(function(){
      change();
    });

function change() {

    $('#canvas1').remove();

    $( "#canvas" ).append("<canvas id='canvas2' data-processing-sources='other.pde'></canvas>");

}


});

然后是PDE文件：

void setup()
{
    size(300, 300);
    background(1000);
    fill(255);
    noLoop();
    PFont fontA = loadFont("courier");
    textFont(fontA, 14);  
}

void draw(){  

    text("Hello Web!",20,20);
    println("Hello ErrorLog!");
    ellipse(20, 20, 20, 20);
}

所以我希望这可以工作，但我读到它是在页面加载上绘制的。

那我怎么能做到这一点？如何使按钮单击可以更改草图？我已经为此而来了，因为我真的不明白处理网站告诉我的是什么有谁知道如何做到这一点？我非常感激！

使用processingjs

0 个答案: