問題タブ [html5-animation]

私は KineticJS で動作する小さなアプリケーションに取り組んでいます。円を作成し、ページの読み込み時にフェードインしています...私が遭遇している問題は、メインの円をクリックしてメインの円の周りに小さな円を「生成」すると、すべての円が消えることです...

http://jsfiddle.net/T9RfA/1/

他の誰かがこの種の問題に遭遇しますか?

私は小さなオブジェクト指向スタイルの JavaScript デモを書いています - 画面上を動き回るボールの束を描くだけです。この時点では、空想も衝突検出も何もありません。私の Ball.js クラスが優れていると想定しても安全だと考えてください。

私の質問は次のとおりです: どこで ball.draw(context) を呼び出す必要がありますか? 私が設定した方法でボールを画面に描画する唯一の方法は、generateBalls() で呼び出しを行うことのようです。しかし、それは各ボールが 1 回だけ描画されることを意味します。

したがって、誰かがここで私のやり方の誤りを指摘できれば、本当に感謝しています。これは宿題ではなく、javascript と canvas をより適切に扱えるようにするためのものです。

アドバイスありがとう、マルク

私は小さな子供向けのぬりえゲームを書いています。最初にキャンバスに白黒の画像が表示され、ユーザーがキャンバス上で描画ツール (マウス) を動かすと、白黒の表面が塗りつぶされます。対応するカラー画像からのカラー情報。

特に、マウスを動かすたびに、色付きの画像からキャンバスに円形の領域をコピーする必要があります。実際の描画ツールの品質をよりよく模倣するために、円の端は少しぼやけている必要があります。

問題は、これをどのように達成するかです。

私が見る 1 つの方法は、クリッピング領域を使用することですが、この方法ではエッジがぼやけません。それともそうですか？

そのため、アルファマスクを使用してそれを行い、ゼロ以外のアルファを持つマスク内のピクセルに対応するピクセルのみをコピーすることを考えていました。それは実現可能ですか？

HTML5キャンバス要素でアニメーションを書きたいです。キャンバス機能を活用するのに役立つ js ライブラリがいくつかあることがわかりました。たとえば、KineticJS、FabricJS などです。しかし、どのライブラリを使用すればよいかわかりません。
このライブラリを使用する場合の長所と短所は何ですか? または、さらに優れた実装を知っているかもしれませんか?

編集
静止画像に似たものを作成しますが、アニメーションを使用します。たとえば、空に浮かぶ雲、花びらをちぎって投げることができる花。太陽を使ったアニメーションかもしれません。これは一般的な説明です。これが役立つことを願っています。

キャンバスを定義し、それにいくつかの図形を描画する場合、各図形のイベントやその他のプロパティを宣言するために、各図形または画像を特定するにはどうすればよいでしょうか。長方形と三角形があるとします。そのため、それらを特定のエンティティとして定義し、それらを個別に処理するためのメカニズムを用意できますか。KineticJS については知っていますが、この機能を自分で実装したいと思います (学習目的で)。誰でもその方法を特定できますか。それともアルゴリズム的なアプローチでしょうか??

私はこのようなものを持っています:

問題は、最初の div がアニメーションで終了したときに、彼とその下にある div (黄色) を非表示にして、彼の代わりにしたいことです。プロパティ display:none を入れようとしましたが、アニメーションが機能しません。

どんな助けでも大歓迎です。

HTML5 キャンバスに描かれた曲線を 100 MS ごとに X ポイントで再現しようとしていますが、再現されたコピーではいくつかのポイントが失われます。元の曲線に使用されたすべてのポイントがあります。

元の曲線: http://jsfiddle.net/NWBV4/12/

再現曲線： http: //jsfiddle.net/NWBV4/15/

再現された曲線では、SEGMENT_PER_POINTS をポイント数 (たとえば 1000) よりも大きくすると、明らかに完全に描画されます。

しかし、おわかりのように、数値が小さいと、2 番目の曲線に欠けている点があります。

誰もが理由を理解していますか？

誰かがページをスクロールしているときにdivを非表示にする必要があります。また、スクロールを停止するときにdivを表示します。

HTML5またはjQueryを使用したタッチスクリーンアプリケーションでこれを行うことは可能ですか？

誰か助けてくれませんか

前もって感謝します

Javascript を使用して HTML5 Canvas アニメーションのコードを書いています。そのために使っrequestAnimFrameています。アニメーションはポイントに対して正常に機能しています。requestAnimFrameしかし、 orを使用している関数にループ (for または while) を追加するとsetTimeout、アニメーションが機能しません。ループを追加することは私にとって重要です。それを可能にするための提案はありますか？

paper.jsEGベジェ曲線を使用してパスベースのアニメーションを作成する方法 。