H5の最強インターフェイスCanvasがダイナミックなグラフィックス機能を実現

前回の記事では、キャンバスを使用してグラフィックを描画する方法を紹介しましたが、今週は、キャンバスを使用して動的グラフィックを描画する方法を学びます。

アニメーションを描く前に、アニメーションとは何かを理解する必要があります。アニメーションに必要な最低限の基本条件は何でしょうか。

アニメーションを表示するにはツールを何を使用できますか?

これはPPTを使用して描画されたアニメーション効果です

上記の PPT で描画されたアニメーション効果によると、複数の PPT ページ間をすばやく切り替えると、アニメーション効果が表示されることがわかります。

これはアニメーション実装の基本要素です。

単位時間当たり複数の画像を連続再生します。この単位時間は通常、秒単位で測定され、コンピューターでレンダリングされたグラフィックスで十分に滑らかなビデオを得るには、1 秒あたりの画像数がモニターのリフレッシュ レート以上である必要があります (このリフレッシュ レートは通常 60hz)。

各写真内のオブジェクトの状態 (サイズ、形状、色、位置、角度など) は変化する必要があります。

では、これら 2 つの条件をキャンバスに実装するにはどうすればよいでしょうか?

これを 1/60 秒ごとのグラフの描画に変換できます。 JavaScript では、時々何かを実行したい場合に使用する方法は、タイマー setinterval を使用することです。

setinerval（function f(){}，t），タイマーに 2 つのパラメーターを渡すことができます。1 つは関数、もう 1 つは時間です。このコードの意味は、関数 f を t ミリ秒ごとに実行することです。

次に、これを使用して、1/60 秒ごとにグラフを描画する必要があることを実現します。

 setInterval(function(){canCon.fillStyle=black;//canCon.fill はペンを手に取ってこのライスペーパーにベタのグラフィックを描くことを意味し、//style=black は黒インクに浸すことを意味します//継続的に見ることそれは、ベタのグラフィックを描くためのペンを手に取り、黒のインクで貼り付けるだけです。 //ライスペーパー上に円を描画することを考えます (中心の X 位置、Y 位置、円の半径、円の描画開始位置、終了位置) //Last描画するストローク},1000/60 )

最終効果

ただし、アニメーション効果はまだありません。1 秒以内に描画される 60 個のグラフィックスはすべてまったく同じであるため、各グラフィックスが描画されるときに要素の状態を変更する必要があります。

ちなみにスカートは前が537、真ん中が631、最後が707です。フロントエンドを学びたい友達は私たちに参加して一緒に学び、お互いに助け合うことができます。グループには毎晩無料のライブクラスを開催しているマスターがいます。学びたくない場合は参加しないでください。

(537-631-707)

要素の状態を変更するにはどうすればよいですか?

円の位置は円の中心の座標によって決まるため、キャンバスを描画するたびに要素の位置を変更できます。

 varie=100;//円の中心の初期位置を指定すると、円の中心の y 位置は、円が描画されるたびに一定の距離だけ下に移動します setInterval(function(){canCon.fillStyle=black;// canCon.fill は、ペンを手に取り、このライスペーパーに立体を描くことを意味します。 //style=black は、ライスペーパーに浸すことを意味します黒インク //接続するには、ベタのグラフィックを描くためのペンを手に取り、黒インクで貼り付ける必要があります canCon.arc(233,y++,66,0,Math.PI*2);//ご飯の上Paper 円を考えて描きます (円の中心の X 位置、Y 位置、円の半径、円の描き始めの位置、円の描き終わりの位置);//最後のストローク描画する},1000/60)

現時点で表示されているのは、動く円ではなく、伸びていく進行状況バーのようなものです。その理由は実際には非常に単純です。新しいグラフィックを描画するたびに元のグラフィックを消去するわけではありません。このような画像は複数のグラフィックを重ね合わせた結果です。新しいグラフィックを描くたびに、元のグラフィックを消去する必要があります。では、どうすればよいでしょうか?

 varie=100;//円の中心の初期位置を与えると、円の中心の y 位置は、円が描画されるたびに一定の距離だけ下に移動します setInterval(function(){canCon.clearRect(0, 0, 500, 500);/ /長方形領域の左上隅の座標と長方形の幅と高さを消去します canCon.fillStyle=black;//canCon.fill はこのライスペーパー上の絵を拾うことを意味しますベタグラフィックのペン、 //style=black は黒インクに浸すことを意味します //まとめると、ベタグラフィックを描くペンを手に取り、黒インクを付けることを意味します canCon.arc(233,y++,66 , 0,M ath.PI*2);//ライスペーパーに円を描くことを考えます（円の中心のX位置、Y位置、円の半径、円の描き始めと終わりの位置）; );// ペイントを開始},1000/60)

しかし、現時点ではまだ効果がありません。いったい何が起こっているのでしょうか？私たちが子供の頃に絵を描いていたとき、画用紙上の特定の領域を消すときに、最初に筆を持ち上げて消しゴムを使って紙上の特定の領域を消す必要があるのか​​を思い出してください。したがって、キャンバスの領域を消去する前にペンを持ち上げる必要があります。

 varie=100;//円の中心の初期位置を与えると、円の中心の y 位置は円が描画されるたびに一定の距離だけ下に移動します setInterval(function(){canCon.beginPath();//ペンを上に上げます canCon.clearRect(0, 0, 500, 500); // 長方形領域の左上隅の座標と長方形の座標を消去します。幅と高さ canCon.fillStyle=black;//canCon.fill はこのライスペーパーにベタのグラフィックを描くためにペンを取ることを意味し、//style=black は黒インクに浸すことを意味します//一緒に見ると, それは、立体を描くためのペンを手に取り、黒のインクで貼り付けます。 canCon.arc(233,y++,66,0,Math.PI*2); //ライスペーパー上に円を描画することを考えます (中心の X 位置、Y 位置、円の半径、円の描画開始位置、終了位置) //Last描画するストローク},1000/60 )

このようにして、動く円を得ることができます

以上は、ダイナミック グラフィックス機能を実装するための H5 の最強のインターフェイスである Canvas についてのエディターの紹介です。ご質問があれば、メッセージを残してください。エディターがすぐに返信します。また、VeVb武道サイトを応援してくださった皆様、誠にありがとうございました！