html上でセットアップ処理をどのようにしますか？

どのようにHTMLページでprocessingJSスクリプトを実行しますか？誰かが私にテスト用の.htmlと私のための補助コードファイルを送ってアイデアを得ることができましたか？あなたが知りたいhtml上でセットアップ処理をどのようにしますか？

rect(50,50,50,50);

出典

2016-08-24 DIZAD

すべてはこのページにあります：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のモードを使用することです。次に、エディタで作成したファイルを表示することができます（[表示]> [スケッチ]フォルダに移動して）、フード内で何が起こっているのかを知ることができます。

出典

2016-08-24 14:01:33

あなたは、これはそれが少し楽にダイビングを作ることは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>

出典

2016-08-27 03:30:12 Nolo

html上でセットアップ処理をどのようにしますか？

答えて

関連する問題