検索
ホームページウェブフロントエンドH5 チュートリアルパーティクルを描画するための数式と組み合わせた HTML5 での Canvas の使用に関するチュートリアル motion_html5 チュートリアル スキル

最近、Web ページを作成し、HTML5 を学習する過程で作成したデモをいくつか並べてコレクションを作成したいと考えています。しかし、Web ページを作成してすべてのデモを 1 つに並べるのはあまりにも醜すぎます。 1つずつ。 Canvas を学習したので、ブラウザをいじって小さなオープニング アニメーションを作成してみようと思いました。

オープニングアニメーションの効果を少し考えた結果、パーティクルの方が楽しいと思い、パーティクルを使用することにしました。私が最初に書いた技術的なブログ投稿は、テキストと画像のパーティクル化に関するものであったことを今でも覚えています。テキストと画像のパーティクル化 その時は、線形モーションのみを実行し、少し 3D 効果を追加しました。練習方法はシンプルです。そこで、このオープニング アニメーションをよりダイナミックなものにしたいと思いました。

まずデモにアクセスしてください: http://2.axescanvas.sinaapp.com/demoHome/index.html

効果は直線運動よりも動的ですか?それはとても簡単です。このブログ投稿のタイトルを忘れないでください。ちょっとした公式ですが、とても楽しいものです。このような効果を実現するために必要なのは中学校です。 。あるいは高校の物理の知識、加速運動と減速運動の公式。つまり、それは実際には小さなドロップ式です。元の投稿者は、仕事では使用しないかもしれませんが、クールなものをいじるのが好きで、その楽しさは本当に魅力的です。さらに、これを行うことで、プログラミング的思考スキルを強化することもできます。

早速、本題に入りましょう。原理を簡単に説明しましょう~~~

パーティクル モーションのコア コードは次のとおりです:

XML/HTML コードコンテンツをクリップボードにコピー
  1. update:function(time){
  2. this.x = this.vx*time;   
  3. this.y = this.vy*time;   
  4. if(!this.globleDown&&this.y>0){
  5. var yc = this.toy - this.y;   
  6. var xc = this.tox - this.x;   
  7. this.jl = Math.sqrt(xc*xc yc*yc);   
  8. var za = 20;   
  9. var ax = za*(xc/this.jl),
  10. ay = za*(yc/this.jl),
  11. vx = (this.vx ax*time)*0.97,
  12. vy = (this.vy ay*time)*0.97;   
  13. this.vx = vx;   
  14. this.vy = vy;   
  15. }else {
  16. var 重力 = 9.8;   
  17. var vy = this.vy 重力*時間;   
  18. if(this.y>canvas.height){
  19. vy = -vy*0.7;   
  20. }
  21. this.vy =
  22. }、
粒子には、自由落下と吸引の合計 2 つの状態があります。自由落下は言うまでもありません。吸引について話す前に、パーティクルのプロパティを投稿しましょう:



JavaScript コード
コンテンツをクリップボードにコピーします
  1. var Dot = function(x,y,vx,vy,tox,toy,color){
  2. これ.x=x;
  3. これ.y=y;
  4. この
  5. .vx=vx;
  6. これ
  7. .vy=vy;
  8. これ
  9. .nextox = tox; これ
  10. .nextoy = おもちゃ;
  11. この.color = color;
  12. this.visible = true
  13. ;
  14. this.globleDown = false;
  15. this.setEnd(tox, おもちゃ); }
  16. setEnd:function(tox, toy){
  17. .y;
  18. .x;
  19. }、
  20. x と y は粒子の位置、vx は粒子の水平方向の速度、vy は粒子の垂直方向の速度です。 nexttox などを知っているかどうかは関係ありません。これらは単なる一時的な変数です。 。 tox および toy はパーティクルの宛先位置です。

    まず、すべてのパーティクルに目的地を与えます。これについては以下で説明します。つまり、粒子をその場所に到達させたい場合は、変数 za を加速度として定義し、さらにテストを行うことでおおよそのパラメーターを取得します。それはほぼ同じように感じます。 za は粒子と目的地の間の線の加速度であるため、この段落
    では、粒子の位置と目的地の位置を通じて粒子の水平加速度と垂直加速度を計算できます。

    JavaScript コードコンテンツをクリップボードにコピーします
    1. var ax = za*(xc/this.jl),
    2. ay = za*(yc/this.jl),

    水平加速度と垂直加速度を取得した後、次のステップはさらに簡単です。水平速度と垂直速度の増分を直接計算し、それによって水平速度と垂直速度の値を変更します。

    XML/HTML コードコンテンツをクリップボードにコピー
    1. vx = (this.vx ax*time)*0.97,
    2. vy = (this.vy ay*time)*0.97;
    0.97 を掛ける理由は、粒子の速度が遅くなるようにエネルギー損失をシミュレートするためです。 time は各フレーム間の時間差です

    速度を計算したら、パーティクルの位置を更新するだけです。



    XML/HTML コード
    コンテンツをクリップボードにコピー
    1. this.x = this.vx*time
    2. this.y = this.vy*time
    パーティクルと目的地の間の接続の方向は飛行中に常に変化するため、パーティクルの水平加速度と垂直加速度はフレームごとに再計算する必要があります。

    これが運動の原理です、とても簡単ですね。

    動きの原理について説明したので、次は上記のアニメーションの具体的な実装について説明します。アニメーションの初期化、オフスクリーン キャンバス上で目的の文字や絵を描画し、オフスクリーン キャンバスのピクセルを取得します。 getImageData メソッドによる画面キャンバス。次に、ループを使用してオフスクリーン キャンバス内の描画領域を見つけます。imageData のデータ値は rgba 配列であるため、最後の値、つまり透明度が 128 より大きい場合、その領域が描画されたことを意味すると判断します。描かれた。次に、領域の xy 値を取得します。パーティクル オブジェクトが多すぎるとページ ラグが発生するのを防ぐため、ピクセルを取得するたびにパーティクルの数を制限し、x 値と y 値を 2 ずつ増やします。粒子。



    XML/HTML コード
    コンテンツをクリップボードにコピー
    1. this.osCanvas = ドキュメント.createElement("canvas");   
    2. var osCtx = this.osCanvas.getContext("2d");   
    3. this.osCanvas.width = 1000;   
    4. this.osCanvas.height = 150;   
    5. osCtx.textAlign = "センター";   
    6. osCtx.textBaseline = "中";   
    7. osCtx.font="70px 微软雅黑,黑体 bold";   
    8. osCtx.fillStyle = "#1D181F"
    9. osCtx.fillText("ようこそ", this.osCanvas.width/2, this.osCanvas.height/2-40);   
    10. osCtx.fillText("wAxesのHOMEへ", this.osCanvas.width/2, this.osCanvas.height/2 40);   
    11. var bigImageData = osCtx.getImageData(0,0,this.osCanvas.width,this.osCanvas 。身長);   
    12. ドット = [];   
    13. for(var x=0;xbigImageData.width;x =2){
    14. for(var y=0;ybigImageData.height;y =2){
    15. var i = (y*bigImageData.width x)*4;   
    16. if(bigImageData.data[i 3]>128){
    17. var ドット = 新しい ドット(
    18. Math.random()>0.5?Math.random()*20 10:Math.random()*20 Canvas.width-40,
    19. -Math.random()*canvas.height*2,
    20. 0、
    21. 0、
    22. x (canvas.width/2-this.osCanvas.width/2),
    23. y (canvas.height/2-this.osCanvas.height/2),
    24. 「rgba(" bigImageData.data[i] "," bigImageData.data[i 1] "," bigImageData.data[i 2] ",1)」
    25. );   
    26. dot.setEnd(canvas.width/2,canvas.height/2)
    27. dots.push(dot);   
    28. }
    29. }
    30. }

    循環によってパーティクルの位置 xy 値を取得した後、その位置がパーティクルの目的となります。その後、アニメーションが開始され、文字画像のパーティクル化の効果が得られます。


声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
H5:Web標準とテクノロジーの進化H5:Web標準とテクノロジーの進化Apr 15, 2025 am 12:12 AM

Web標準とテクノロジーは、これまでにHTML4、CSS2、および単純なJavaScriptから進化し、重要な開発を受けてきました。 1)HTML5は、CanvasやWebstorageなどのAPIを導入し、Webアプリケーションの複雑さと互換性を高めます。 2)CSS3はアニメーション関数とトランジション関数を追加して、ページをより効果的にします。 3)JavaScriptは、矢印関数やクラスなど、node.jsおよびES6の最新の構文を通じて開発効率とコードの読みやすさを向上させます。これらの変更により、パフォーマンスの最適化とWebアプリケーションのベストプラクティスの開発が促進されました。

H5はHTML5の速記ですか?詳細の調査H5はHTML5の速記ですか?詳細の調査Apr 14, 2025 am 12:05 AM

H5はHTML5の略語だけでなく、より広い最新のWeb開発テクノロジーエコシステムを表しています。1。H5にはHTML5、CSS3、JavaScript、および関連するAPIおよびテクノロジーが含まれます。 2.より豊かでインタラクティブでスムーズなユーザーエクスペリエンスを提供し、複数のデバイスでシームレスに実行できます。 3. H5テクノロジースタックを使用して、レスポンシブWebページと複雑なインタラクティブ機能を作成できます。

H5およびHTML5:Web開発で一般的に使用される用語H5およびHTML5:Web開発で一般的に使用される用語Apr 13, 2025 am 12:01 AM

H5とHTML5は、同じこと、つまりHTML5を参照します。 HTML5はHTMLの5番目のバージョンであり、セマンティックタグ、マルチメディアサポート、キャンバスとグラフィックス、オフラインストレージ、ローカルストレージなどの新しい機能をもたらし、Webページの表現力と互換性を向上させます。

H5は何を参照していますか?コンテキストの探索H5は何を参照していますか?コンテキストの探索Apr 12, 2025 am 12:03 AM

H5ReferStoHtml5、apivotaltechnologyinwebdevelopment.1)html5introduceSnewelementsandapisforrich、dynamicwebapplications.2)Itupp ortsmultimediawithoutplugins、endancingurexperiencecrossdevices.3)semanticelementsimprovecontentstructurendseo.4)H5'srespo

H5:ツール、フレームワーク、およびベストプラクティスH5:ツール、フレームワーク、およびベストプラクティスApr 11, 2025 am 12:11 AM

H5開発で習得する必要があるツールとフレームワークには、Vue.JS、React、Webpackが含まれます。 1.Vue.jsは、ユーザーインターフェイスの構築に適しており、コンポーネント開発をサポートします。 2.複雑なアプリケーションに適した仮想DOMを介したページレンダリングを最適化します。 3.Webpackは、モジュールのパッケージングに使用され、リソースの読み込みを最適化します。

HTML5の遺産:現在のH5の理解HTML5の遺産:現在のH5の理解Apr 10, 2025 am 09:28 AM

html5hassificlytransformdedwebdeveverment byintroducingsingingelements、endincemultimediasupport、およびrequrovingperformance.1)itmadewebsitesmoreaccessibleandseo-frendlywithsemantelementslike、and.2)

H5コード:アクセシビリティとセマンティックHTMLH5コード:アクセシビリティとセマンティックHTMLApr 09, 2025 am 12:05 AM

H5は、セマンティック要素とARIA属性を介して、WebページのアクセシビリティとSEO効果を改善します。 1.使用などを使用して、コンテンツ構造を整理し、SEOを改善します。 2。ARIA-LabelなどのARIA属性はアクセシビリティを強化し、支援技術ユーザーはWebページをスムーズに使用できます。

H5はHTML5と同じですか?H5はHTML5と同じですか?Apr 08, 2025 am 12:16 AM

「H5」と「HTML5」はほとんどの場合同じですが、特定の特定のシナリオでは異なる意味を持つ可能性があります。 1。「HTML5」は、新しいタグとAPIを含むW3C定義標準です。 2。 "H5"は通常、HTML5の略語ですが、モバイル開発では、HTML5に基づくフレームワークを参照する場合があります。これらの違いを理解することは、プロジェクトでこれらの用語を正確に使用するのに役立ちます。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、