コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > H5 チュートリアル > HTML5 キャンバスで降る雪片の特殊効果を実現_html5 チュートリアル スキル

HTML5 キャンバスで降る雪片の特殊効果を実現_html5 チュートリアル スキル

WBOY
リリース： 2016-05-16 15:51:47
オリジナル
1690 人が閲覧しました

HTML5 の雪の結晶が飛ぶ効果を示す表示をインターネット上でたくさん見てきましたが、これは確かに非常に魅力的であり、誰もが私と同じように興奮しており、コードの実装方法を研究したいと考えていると思います。これらのソースコードはさまざまな場所からダウンロードできますが、他の人のアイデアやそのようなアニメーションを作成する際の困難さの分析は知りません。

私は最近たまたま勉強することが多く、需要分析から知識ポイント、プログラミングまで段階的に分析しています。あなた、笑わないでください。

最終的なレンダリングは次のとおりです:

写真 1

1. 需要分析

1. 丸い雪の結晶

この例の雪の結晶の形状は円を使用しています

2.雪の結晶の数は固定です

図 1 に従って、白い雪の結晶の数を注意深く観察してください。落下プロセス中に、画像全体の雪の結晶の数は、観察と分析を通じて取得される必要があります。これは、私たちが実際に見る、空一面に雪が舞う光景と一致しています。

3. 雪の結晶のサイズが一定ではありません

各雪片のサイズは異なります。つまり、雪片の半径はランダムです。これは、現実の空に雪の結晶が飛んでいるのを見るシーンと一致しています。

4. 雪の結晶の位置が移動します

雪の結晶が降ってきて、当然その位置も移動します。

2. 知識のポイント

1. Html5 Canvas JavaScript を使用して円を描き、円形の雪の結晶を形成します

HTML5 では、Canvas を使用し、JavaScript を使用して円を描いて円形のスノーフレークを形成する必要があります - arc(x, y, r, start, stop);

2. 乱数 - 異なる半径と座標を持つ円形の雪の結晶を生成します

この例では、Web ページが初めて読み込まれるときに、半径と位置が異なる一定数の雪の結晶を生成する必要があるため、雪の結晶が降っている間の半径と座標は乱数になります。は変化せず、座標は一定の範囲内で変化するため、この時点でも座標は乱数になります—Math.random()

3. プログラミング

1.準備

キャンバスを置き、全体の背景色を黒に設定します

HTML コード:

XML/HTML コードコンテンツをクリップボードにコピー
  1. <キャンバス id="mycanvas" >
  2. お使いのブラウザはキャンバスをサポートしていません
  3. キャンバス>
CSS コード:

CSS コードコンテンツをクリップボードにコピーします
  1. * {
  2. マージン:
  3. パディング: 0; }
  5. #mycanv
  6. as { 背景
  7. : 黒; }
  9. この時の効果は以下の通りです:
注: キャンバスの高さと幅はデフォルトで初期化されているため、心配する必要はありません

2. キャンバスが画面いっぱいに表示されます

JavaScript コードは次のとおりです:

JavaScript コード

コンテンツをクリップボードにコピーします

  1. //mycanvas キャンバスを取得
  2. var can = document.getElementById("mycanvas" );
  3. var ctx = can.getContext("2d");
    4. //キャンバス幅
    5. var
  5. wid = window.innerWidth; //キャンバスの高さ
  6. var
    7. hei = window.innerHeight;
  7. can.width=wid; can.height=hei
    9. この時の効果は以下の通りです:
3. 初期化により一定数の雪の結晶が生成されます

上記の需要分析と知識ポイントの解釈によると、まず雪の結晶の数は固定されているため、変数 var Snow = 100 を定義する必要があります。ここでは雪の結晶の数が 100 であると仮定します。

雪の結晶を生成するとき、各雪の結晶の半径と位置は異なります。各雪の結晶をオブジェクトとみなします。このオブジェクトのプロパティには半径、座標 (X、Y) が含まれます。雪の結晶オブジェクトは次のように記述できます。 var SnowOject={x:1,y:10,r:5} は、座標 (1,10) と半径 5 の円形の雪の結晶を表します。この例では、半径と座標が乱数であるため、Math が使用されます。 random() は 100 個の雪片の半径と座標 (X, Y) を生成します

ここには 100 個の雪の結晶があるため、後続の操作を容易にするために、配列を使用してこれら 100 個の雪の結晶オブジェクトを保存します。 JavaScript コードは次のとおりです:

JavaScript コード

コンテンツをクリップボードにコピーします

//雪の結晶の数
  1. var 雪 = 100;
  2. //スノーフレークの座標、半径
  3. var arr = []; //各円の座標と半径を保存
  4. for (var
    5. i = 0; i arr.push({ x: Math.random() * wid, y: Math.random() * hei,
    6. r: Math.random() * 10 1
    7. })
    8. }
    10. 4. 雪の結晶を描く
  10. 上記で 100 個の雪の結晶の半径と座標 (X, Y) を生成しました。次は、canvas を使用して雪の結晶を描画します (ここでは、円を描画します)。
    11.
JavaScript コードは次のとおりです:


JavaScript コードコンテンツをクリップボードにコピーします

  1. //雪の結晶を描く
  2. 関数 DrawSnow() {
  3. ctx.fillStyle="白";
    4. ctx.beginPath();
  5. for (var i = 0; i
  6. var p = arr[i]; ctx.moveTo(p.x,p.y);
  7. ctx.arc(p.x,p.y,p.r,0,2*Math.PI,
    8. false
  8. ); }
    9. ctx.fill();
    11. ctx.closePath();
  13. 次に、DrawSnow() 関数を呼び出します。結果は次のようになります。
Web ページを複数回更新して、さまざまなサイズと位置の雪の結晶が生成されるかどうかを確認できます (通常はこれが可能です)。

注: ここでは 100 個の円を描画する必要があるため、円を描画するたびに描画開始座標が再定義されます。 ctx.moveTo(p.x,p.y); そうしないと、奇妙な効果が発生します。試してみてください

5. 雪の結晶が舞う

上では 100 個の雪の結晶を描画しましたが、残念なことに、変化する効果は Web ページを更新することでしか確認できませんが、達成する必要があるのは、雪の結晶が動き続けることです。

まず、setInterval 関数を使用して雪片を継続的に再描画する必要があります。ここでの間隔は 50 ミリ秒です: setInterval(DrawSnow,50); 同時に、各雪の結晶の座標(X,Y)を(一定の範囲内で)常に変更する必要があります。ここでの雪の結晶は左上から右下に向かって降下するため、XとYの座標値は変化します。各雪の結晶は増加し続けます。次に、関数 SnowFall() を使用して雪の結晶の落下ルールを定義します

関数コードは次のとおりです:

JavaScript コード

コンテンツをクリップボードにコピーします

  1. //雪花飘落
  2. 関数 SnowFall() {
  3. for (var i = 0; i < snow; i ) {
  4. var p = arr[i];   
  5. p.y = Math.random() * 2 1;   
  6. if (p.y > hei) {
  7. p.y = 0;   
  8. }
  9. p.x = Math.random() * 2 1;   
  10. if (p.x > wid) {
  11. p.x = 0;   
  12. "white-space:pre">    }
  13. }
  14. }


その後该関数数放入DrawSnow()执行，注意：我们每隔50毫毛重画雪花，必须擦除画布，所以DrawSnow()関数内必须在前面执行clearRect()関数数，すなわち： ctx.clearRect(0, 0, wid, hei);

今回はDrawSnow関数数定义如下：

JavaScript コード复制コンテンツ到剪贴板
  1. //画雪花
  2. 関数 DrawSnow() {
  3. ctx.clearRect(0, 0, wid, hei);   
  4. ctx.fillStyle = "白";   
  5. ctx.beginPath();   
  6. for (var i = 0; i < snow; i ) {
  7. var p = arr[i];   
  8. ctx.moveTo(p.x, p.y);   
  9. ctx.arc(p.x, p.y, p.r, 0, 2 * Math.PI, false);   
  10. }
  11. ctx.fill();   
  12. SnowFall();   
  13. ctx.closePath();   
  14. }

最後に実行setInterval(DrawSnow, 50); 

OK、上記の手順を経て、小さなパートナーはすべての手順と技術が完了したかどうかを確認しました。

完整代码如下（大家可以直接自己项目中行，测试下効果）：

XML/HTML コード复制コンテンツ到剪贴板
  1. >
  2. <html>
  4. <頭>
  5. <meta charset="utf- 8" />
  6. <タイトル>タイトル>
  7. <script src="js/ jquery-1.8.3.min.js">スクリプト>
  8. <スタイル タイプ="text/ css">
  9. * {
  10. マージン: 0;   
  11. パディング: 0;   
  12. }
  14. #mycanvas {
  15. 背景: 黒。   
  16. }
  17. スタイル>
  18. 頭>
  20. <ボディ>
  21. <canvas id="mycanvas" >
  22. お使いのブラウザはキャンバスをサポートしていません
  23. キャンバス>
  24. <スクリプト>
  25. //mycanvas キャンバスを取得
  26. var can = ドキュメント.getElementById("mycanvas");
    27. var
  27. ctx = can.getContext("2d"); //キャンバス幅
  28. var
    29. wid
  29. = window.innerWidth; //キャンバスの高さ
    30. var
  30. hei
    31. =
  31. ウィンドウ.innerHeight; can.width = wid;
  32. can.height = ヘイ
    33. //雪の結晶の数
  33. var 雪
    34. =
  34. 100
    35. ;
  35. //スノーフレークの座標、半径 var arr = [] //各円の座標と半径を保存します
    36. ;
  36. for (var
    37. i
  37. = 0; i
    38. <
  38. 雪 ) { ; arr.push({ x: Math.random() * wid,
  39.                     y: Math.random() * hei,   
  40.                     r: Math.random() * 10   1   
  41.                 })   
  42.             }   
  43.             //画雪花   
  44.             function DrawSnow() {   
  45.                 ctx.clearRect(0, 0, wid, hei);   
  46.                 ctx.fillStyle = "white";   
  47.                 ctx.beginPath();   
  48.                 for (var i = 0; i < snow; i ) {   
  49.                     var p = arr[i];   
  50.                     ctx.moveTo(p.x, p.y);   
  51.                     ctx.arc(p.x, p.y, p.r, 0, 2 * Math.PI, false);   
  52.                 }   
  53.                 ctx.fill();   
  54.                 SnowFall();   
  55.                 ctx.closePath();   
  56.             }  
  57.             //雪花飘落   
  58.             function SnowFall() {   
  59.                 for (var i = 0; i < snow; i ) {   
  60.                     var p = arr[i];   
  61.                     p.y  = Math.random() * 2   1;   
  62.                     if (p.y > hei) {   
  63.                         p.y = 0;   
  64.                     }   
  65.                     p.x  = Math.random() * 2   1;   
  66.                     if (p.x > wid) {   
  67.                         p.x = 0;   
  68.                     }   
  69.                 }   
  70.             }   
  71.             setInterval(DrawSnow, 50);   
  72.         script>  
  73.     body>  
  74.   
  75. html>  
  76.   

好了，今天分享就到这里，希望对大家的学习有所帮助。
原文：http://www.cnblogs.com/tangyifeng/p/5253629.html

関連ラベル：
canvas html5
ソース：php.cn
前の記事：HTML5 の構造とセマンティクス (3): セマンティック ブロック レベルの要素_html5 チュートリアル スキル 次の記事：HTML5 の構造とセマンティクス (2): Structure_html5 チュートリアルのスキル
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ページのメインディスプレイに画像を表示するにはどうすればよいですか? 私がやりたいのは、NASAAPI を使用して写真を受信することです。これらの写真は、マイページのサムネイルとメインディスプレイに表示されます。コードがサムネイルから画像を取得してペ...
から 2024-04-06 15:33:12
0
1
433
PDF ファイルは HTML5 と JavaScript を実行できますか? PDF に埋め込まれるため、どのコンピュータでもブロックされないプログラムを作成してみようという愚かな考えがあります (JavaScript は PDF 内で実行できると聞きました...
から 2024-04-05 12:57:00
0
1
456
HTML5 の enctype と formenctype の違いは何ですか? HTMLLivingStandard (別名、新しい HTML5 仕様) の属性 enctype と formenctype の違いは何でしょうか?私は HTML Standard...
から 2024-04-02 11:47:56
0
1
275
ページをモバイル対応にしますか? たくさんの Web ページといくつかの Web サイトがあります。問題は、私は初心者だということです。基本的な html5 と css3 を使用していますが、それらをスケールアップ...
から 2024-04-01 20:42:38
0
1
259
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート