私は最近、雨と軽い雪のアニメーション効果を実現する必要があるプロジェクトを作成したので、このキャンバスの一般的な落下物を示すためにドロップコンポーネントを作成しました。メインテキストを紹介する前に、レンダリングをお見せしましょう。
レンダリングを表示：
雨と雪が降る
よさそうだ。 DOM要素の作成を使用してマルチオブジェクトの位置の動きの写真を作成することと比較すると、キャンバスを使用すると、パフォーマンスが向上します。
コードを呼び出します
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> document> document> document </title> <style> #canvas {width：100％; height：100％;} </style> </head> <body> <body> <canvas id = "canvas src = "canvasdrop.js"> </script> <script> canvasdrop.init（{type： "雨"、//ドロップタイプ、雨または雪の速度：[0.4,2.5]、//速度範囲size_range：[0.5,1.5]、//サイズと半径の範囲ハスボング：ange and and and and and and and and and age and and age and and and age and and and age hasgravity：true //重力の考慮事項はありますか}）; </script> </body> </html>わかりました、簡単な実装の原則を説明しましょう。まず、風向角、確率、オブジェクトデータなど、使用するいくつかのグローバル変数を定義します。
グローバル変数を定義します
// 2つのオブジェクトデータの定義//風向//キャンバスのピクセル幅と高さvar canvaswidth、canvasheight; // drop var drop_chanceを作成する確率; //オブジェクトvar opts; // default requestanimationframeメソッドがあるかどうか、それがある場合、使用する場合、no、noがあります。 || window.webkitrequestanimationframe || window.mozrequestanimationframe || window.orequestanimationframe || window.msrequestanimationframe || function（callback）{window.settimeout（callback、1000 /30）;};コアオブジェクトを定義します
次に、いくつかの重要なオブジェクトを定義する必要があります。組織が定義する必要があるオブジェクトは少なくなります。合計で、ドロップコンポーネント全体で定義されている3つのコアオブジェクトのみが次のとおりです。
水平xおよび垂直y速度サイズ単位を備えたベクトル速度オブジェクト：v =変位ピクセル/フレーム
ベクトルオブジェクトの理解も非常にシンプルで粗いです。これは、落下するオブジェクトの速度を記録することです。
var vector = function（x、y）{// private属性水平速度x、垂直速度ythis.x = x || 0; this.y = y || 0;}; // public Method- add：速度変更関数、パラメーターに応じて速度を上げる//ビジネスニーズのために、すべての低下加速が考慮されるため、速度低下はありません。 string */vector.prototype.add = function（v）{if（vx！= null && vy！= null）{this.x += vx; this.y += vy;} {//同じ速度属性を持つベクトルインスタンスを返す新しいベクトル（this.x、this.y）;};ドロップオブジェクト、つまり雨滴と雪が上記の効果で、後でmet石またはシェルに拡張できます。ドロップオブジェクトの基本的な定義は次のとおりです。/上記の3つの方法を読んだ後、あなたは彼らの役割を推測しましたか？これらの3つの方法が何をするかを理解しましょう。
コンストラクタ
コンストラクターは、主に速度、初期座標、サイズ、加速など、ドロップオブジェクトの初期情報を定義する責任があります。
// constructor dropvar drop = function（）{//ランダムドロップの初期座標を設定するMath.random（） * canvas.height）;} //落下要素のサイズの設定（opts.speed [0] + math.random（） * opts.speed [1]） * dpr; this.prev = this.pos; //角度に0.017453293（2PI/360）を掛けてラジアンに変換します。 var harsager = 0.017453293; //風向の角度を取得するwind_anger = opts.wind_direction * adagerger; //ラテラルアクセラレーションspeed_x = this.speed * math.cos（wind_anger）; //縦方向のアクセラレーションspeed_y = - this.speed * math.sin（wind_anger）;ドロップオブジェクトの方法を更新します
更新方法は、変位の変更など、各フレームドロップインスタンスの属性を変更する責任があります。
drop.prototype.update = function（）{this.prev = this.pos.copy（）; //重力がある場合、縦方向の速度が増加します（opts.hasgravity）{this.y += gravity;} // this.pos.add（this.vel）;};ドロップオブジェクトの描画方法
描画方法は、各フレームドロップインスタンスを描画する責任があります
drop.prototype.draw = function（）{ctx.beginpath（）; ctx.moveto（this.pos.x、this.pos.y）; //現在、2つの状況しかありません。 Math.abs（this.radius * math.cos（wind_anger））; var ay = math.abs（this.radius * math.sin（wind_anger））; ctx.beziercurveto（this.pos.x + ax、this.y + ay、this.prev.x + ax this.pos.y）; ctx.stroke（）; //もう一方は 雪 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -リバウンドの対象を跳ね返し、落下、つまり、上の雨水からリバウンドする水滴は、後の段階でリバウンド砂利や煙に拡大することもできます
定義は非常に単純なので、ここで詳しく説明しません
var bounce = function（x、y）{var dist = math.random（） * 7; var angle = math.pi + math.random（） * math.pi; this.pos = new Vector（x、y）; this.radius = 0.2+ math.random（） dist）;}; bounce.prototype.update = function（）{this.vel.y += gravity; this.vel.x *= 0.95; this.y *= 0.95; this.pos.Add（this.vel）;}; this.radius * dpr、0、math.pi * 2）; ctx.fill（）;};外部インターフェイス
アップデート
つまり、キャンバスアニメーション全体に相当する開始関数
function update（）{var d = new Date; //図面CTX.CLEARRECT（0、0、CANVAS.WIDTH、CANVAS.HEIGHT）; var i = drops.length; whir（i--）{var drop = drops [i]; drop.update（）; canvas.height）{//リバウンドが必要な場合は、バウンスアレイにバウンスインスタンスを追加するif（opts.hasbounce）{var n = math.round（4 + math.random（） * 4）; （n - ）bounces.push（new Bounce（drop.pos.x、canvas.height））;} //ドロップインスタンスが下部にドロップする場合、インスタンスオブジェクトのドロップアレイをクリアする必要があります。 （i--）{var bounce = bounces [i]; bounce.update（）; bounce.draw（）; if（bounce.pos.y> canvas.height）bounces.splice（i、1）;}} //生成された各時間の数がif（drops.maxnum）<opts.maxnum）{lotts.maxnum（） = 0、len = opts.numlevel; for（; i <len; i ++）{drops.push（new drop（））;}}}} // continuurally loop updaterequestanimframe（update）;}init
initインターフェイス、画面のピクセル比の取得、キャンバスのピクセルサイズの設定、キャンバスのスタイルの設定など、キャンバスキャンバス全体のすべての基本プロパティを初期化します
function init（opts）{opts = opts; canvas = document.getElementbyId（opts.id）; ctx = canvas.getContext（ "2d"）; ////高解像度画面と互換性がある場合、キャンバスキャンバスピクセルもDPR = window.devicepixelratio;画面なので、アートボードキャンバスの長さと幅はdpr canvaswidth = canvas.clientwidth * dpr; canvasheight = canvas.clientheight * dpr; //アートボードの幅と高さを設定します。 setStyle（）;}関数setStyle（）{if（opts.type == "rain"）{ctx.linewidth = 1 * dpr; ctx.strokestyle = 'rgba（223,223,223,0.6）'; ctx.fillstyle = 'rgba（223,223,223,0.6）';} else {ctx.linewidth = 2 * dpr; ctx.strokestyle = 'rgba（254,254,254,0.8）'; ctx.fillstyle = 'rgba（254,254,254,0.8）';}結論
もちろん、単純なドロップコンポーネントが完了しました。もちろん、完璧ではないことがたくさんあります。このドロップコンポーネントを作成した後、キャンバスのアニメーション実装のために、H5シーンには多くの場所があると思います。
最後に、欠点と後の仕事について話しましょう。
0.このコンポーネントには十分な外部インターフェイスがありません。調整可能な範囲はそれほど大きくなく、抽象化はそれほど徹底的ではありません。
1。SetStyleSet Basic Style
2。ドロップオブジェクトとバウンスの更新および描画方法のカスタマイズにより、ユーザーは速度とサイズの変化のより多くのフォームとスタイル効果を設定できます。
3.アニメーションの一時停止、加速、減速操作のインターフェイスを追加する必要があります。
上記は、雨と雪の効果の達成について私があなたに紹介したJSとキャンバスに関する関連する知識です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！
この記事に再現されています：http：//blog.csdn.net/xllily_11/article/details/51444311