パーティクルを描画するための数式と組み合わせた 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;   
5. if(!this.globleDown&&this.y>0){
6. var yc = this.toy - this.y;   
7. var xc = this.tox - this.x;   
9. this.jl = Math.sqrt(xc*xc yc*yc);   
11. var za = 20;   
13. var ax = za*(xc/this.jl),
14. ay = za*(yc/this.jl),
15. vx = (this.vx ax*time)*0.97,
16. vy = (this.vy ay*time)*0.97;   
18. this.vx = vx;   
19. this.vy = vy;   
21. }else {
22. var 重力 = 9.8;   
23. var vy = this.vy 重力*時間;   
25. if(this.y>canvas.height){
26. vy = -vy*0.7;   
27. }
29. this.vy =
}、

粒子には、自由落下と吸引の合計 2 つの状態があります。自由落下は言うまでもありません。吸引について話す前に、パーティクルのプロパティを投稿しましょう:

JavaScript コード

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

1. var Dot = function(x,y,vx,vy,tox,toy,color){
2. これ.x=x;
3. これ.y=y;
この
4. .vx=vx;
これ
5. .vy=vy;
これ
6. .nextox = tox; これ
.nextoy = おもちゃ;
7. この.color = color;
8. this.visible = true
;
9. this.globleDown = false;
10. this.setEnd(tox, おもちゃ); }
11. setEnd:function(tox, toy){
13. .y;
.x;
14. }、

15. 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
    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");   
    4. this.osCanvas.width = 1000;   
    5. this.osCanvas.height = 150;   
    7. osCtx.textAlign = "センター";   
    8. osCtx.textBaseline = "中";   
    9. osCtx.font="70px 微软雅黑,黑体 bold";   
    10. osCtx.fillStyle = "#1D181F"
    11. osCtx.fillText("ようこそ", this.osCanvas.width/2, this.osCanvas.height/2-40);   
    12. osCtx.fillText("wAxesのHOMEへ", this.osCanvas.width/2, this.osCanvas.height/2 40);   
    13. var bigImageData = osCtx.getImageData(0,0,this.osCanvas.width,this.osCanvas 。身長）;   
    15. ドット = [];   
    17. for(var x=0;x<bigImageData.width;x =2){
    18. for(var y=0;y<bigImageData.height;y =2){
    19. var i = (y*bigImageData.width x)*4;   
    20. if(bigImageData.data[i 3]>128){
    21. var ドット = 新しい ドット(
    22. Math.random()>0.5?Math.random()*20 10:Math.random()*20 Canvas.width-40,
    23. -Math.random()*canvas.height*2,
    24. 0、
    25. 0、
    26. x (canvas.width/2-this.osCanvas.width/2),
    27. y (canvas.height/2-this.osCanvas.height/2),
    28. 「rgba(" bigImageData.data[i] "," bigImageData.data[i 1] "," bigImageData.data[i 2] ",1)」
    29. );   
    30. dot.setEnd(canvas.width/2,canvas.height/2)
    31. dots.push(dot);   
    32. }
    33. }
    34. }

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