How to call Processing.js function from HTML?

问题

I'm exploring HTML5 and Processing.js.

When the user clicks on an image on my webpage, I'd like to call a function in the Processing.js code. Just calling the function in onclick, as illustrated in this simple example, isn't working:

<html>
  <head>
    <script language="javascript" src="processing.init.js"></script>
    <script language="javascript" src="processing.js"></script>
  </head>
  <body>
    <script type="application/processing">
    void restart()
    { /* does something */ }
    </script><canvas>
      You'll need a browser that supports HTML5 to see this content.
    </canvas><br/><br/>
    <img src="restart-image.png" onclick="restart()">
  </body>
</html>

Any thoughts on how I can call a method in the Processing.js script when an image is clicked? (Maybe I'm making a basic HTML mistake by using img onclick?)

回答1:

I would start by pulling the javascript for the onclick out of the img tag.

In a separate javascript file you can have:

document.getElementById('restartimage').onclick = function() { Processing.setup(); }

Obviously I put an id attribute on your img tag.

The setup function I noticed on this page: http://processingjs.org/

The basic idea is that by pulling the onclick into a javascript file it will be easier to code what it should do.

回答2:

you need to change the script-type to text/javascript or application/javascript first.

then place 'function' before 'restart()' function reducing 'void'.

i have used firefox 3.0.14 on ubuntu 9.04.

回答3:

You can call processing functions using the Processing js object's getInstanceById function.

For example here is a function:

$(window).resize(function(){
    var p=Processing.getInstanceById('processing_canvas_id');
    p.resize($("#main").width(),$("#main").height());
  });

Where resize is my processing function inside the processing file associated with processing_canvas_id.

回答4:

This should work, enclose you image inside the anchor tag <a> image </a> Use href tag to call the function.

<a href="javascript:restart()"> image source </a>

来源：https://stackoverflow.com/questions/1414370/how-to-call-processing-js-function-from-html

标签

html

processing.js