JavaScript/キャンバスをかなり頻繁に使用する Web サイトを作成することを考えていて、Processing.jsを見てきましたが、キャンバスの操作が大幅に簡単になるようです。Processing.js を使用してはいけない理由を知っている人はいますか? 古いブラウザーでは使用できないことは理解していますが、今のところは問題ありません。
5 に答える
IE7 で動作しなくても問題ない場合は、実行してください。私は Firefox 3 で動作させました。Silverlight/Flash 効果をページにもたらす巧妙な方法です。
私の推測では、Processing.js のようなライブラリはファスト トラック パスで変更またはアップグレードされるので、そのときに実行できるように準備を整え、新しい機能についていくようにしてください。
前述のとおり、IE は Processing.js (IE8 ベータ版を含む) ではサポートされていません。また、canvas を使用する場合と比較して、processing.js のパフォーマンスが少し遅いこともわかりました (特に、javascript API を使用する代わりに、Processing 言語で文字列を解析している場合)。
個人的には、処理ラッパーよりもキャンバス API の方が好みです。より詳細に制御できるからです。例えば:
処理 line() 関数は次のように実装されます (大まかに):
function line (x1, y1, x2, y2) {
context.beginPath();
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.closePath();
context.stroke();
};
次のように使用します (javascript に公開された API を使用していると仮定します)。
var p = Processing("canvas")
p.stroke(255)
////Draw lines...///
p.line(0,0,10,10)
p.line(10,10,20,10)
//...and so on
p.line(100,100,200,200)
////End lines////
line() 呼び出しごとに新しいパスを開いたり閉じたりする必要があることに注意してください。一方、canvas API を使用すると、単一の beginPath/endPath ブロック内にすべての線を描画できるため、パフォーマンスが大幅に向上します。
context.strokeStyle = "#fff";
context.beginPath();
////Draw lines...///
context.moveTo(0, 0);
context.lineTo(10, 10);
context.lineTo(20, 10);
//...so on
context.lineTo(200, 200);
////End lines...///
context.closePath();
context.stroke();
キャンバスへの描画が簡単になるわけではありません。キャンバスを使用している場合、アニメーションのタスクを簡素化します。アニメーションを作成していて、ブラウザーの完全なサポートを気にしない場合は、Processing.js を使用してください。アニメーションを行っていない場合 (たとえば、チャートや角を丸めている場合)、Processing.js のオーバーヘッドを追加しないでください。
いずれにせよ、キャンバス API を直接使用する方法を学ぶことをお勧めします。キャンバス API、特に変換を理解することは、Processing.js を使用している場合でも大いに役立ちます。
代わりにFlashを使用するといいでしょう。processing.js で動作するブラウザの数よりも多くのブラウザに Flash がインストールされています。さらに、JavaScript を使用するよりも Flash の方がはるかに優れたパフォーマンスを得ることができます (少なくとも今のところは、JS を大幅に高速化するプロジェクトが進行中ですが、まだ少し先の話です)。