どのようにHTMLページでprocessingJSスクリプトを実行しますか?誰かが私にテスト用の.htmlと私のための補助コードファイルを送ってアイデアを得ることができましたか?あなたが知りたいhtml上でセットアップ処理をどのようにしますか?
rect(50,50,50,50);
どのようにHTMLページでprocessingJSスクリプトを実行しますか?誰かが私にテスト用の.htmlと私のための補助コードファイルを送ってアイデアを得ることができましたか?あなたが知りたいhtml上でセットアップ処理をどのようにしますか?
rect(50,50,50,50);
すべてはこのページにあります:JavaScript Quick Start | Processing.js
しかし、基本的に、あなたが処理をロードするHTMLファイルを作成し実行する必要があり
のは、私はこの長方形を実行したいとしましょう.jsライブラリを開き、Processing.jsコードを書き込み、.pde
ファイルをそのページのcanvas
タグにロードします。それは次のようになります。それを行うには
<!DOCTYPE html>
<html>
<head>
<title>Hello Web - Processing.js Test</title>
<script src="processing-1.3.6.min.js"></script>
</head>
<body>
<h1>Processing.js Test</h1>
<p>This is my first Processing.js web-based sketch:</p>
<canvas data-processing-sources="hello-web.pde"></canvas>
</body>
</html>
最も簡単な方法は、[実行]をクリックします(バージョン2.2.1を使用する必要がある場合があります)処理エディタからJavaScriptのモードを使用することです。次に、エディタで作成したファイルを表示することができます([表示]> [スケッチ]フォルダに移動して)、フード内で何が起こっているのかを知ることができます。
あなたは、これはそれが少し楽にダイビングを作ることはJavaScriptではなくPDEよりも(Java)のコードでProcessing.jsライブラリを使用したい場合は、ケビンの答えに追加する。
*は、いくつかのJavaScriptの人々ことに注意してくださいwith(obj){code}
を使用するとうっ血になるかもしれませんが、私はこれを例として挙げて、コードを整理してあまり冗長にしません。状況に応じてあなた自身の判断を使用してください。
また、処理ライブラリが以下のコードのファイルと同じフォルダにあり、以下のコードでファイルの名前が正しいことを確認してください。
お楽しみください! :)
<html>
<head>
</head>
<body>
<canvas id="output-canvas"></canvas>
<script src="processing.1.4.8.js"></script>
<script> (function() {
new Processing (document.getElementById ("output-canvas"), sketch);
function sketch (pjs) {
// some initilization if you prefer
// set the canvas size
pjs.size (800, 600);
// (0, 0, 0, 0) - if you want a transparent sketch over some backdrop
pjs.background (255, 255, 255, 255);
// make the ugly pjs go away
with (pjs) {
// red stroke
stroke (255, 0, 0);
// thick border
strokeWeight (5);
// yellow fill
fill (255, 240, 0);
// draw a rectangle
rect (50, 50, 300, 200);
}
}
})(); </script>
</body>
</html>