キャンバスの雪の効果の核心コードを共有

言葉は多いので、コードを見てください：

var ca = document.getElementById("ca");
 var ctx = ca.getContext('2d');
 //nからmまでのランダムな数を生成する関数
 function random(n,m){
 return Math.floor(Math.random() * (m - n) + n);
 }
 //角度をラジアンに変換する関数
 function toRd(angle){
 return angle * Math.PI / 180;
 }
 //キャンバスの最大幅と高さを保存する変数を設定します
 var maxH = ca.height;
 var maxW = ca.width;
 //各雪が持つ特性
 //x,y座標、雪の半径、角度、
 //まず生成100個雪
 var snows = [];
 for(var i=0;i<200;i++{
 snows.push({
 "left": random(0, maxW),
 "top": random(0, maxH),
 "deg": random(-20, 20), //データの更新に役立てる
 "radius": random(2, 10)
 });
 }
 //これらの属性を各雪に適用します
// for(var i=0;i<snows.length;i++) {
// var r = snows[i].radius;
// var x = snows[i].left;
// var y = snows[i].top;
// var ra = ctx.createRadialGradient(x, y, r / 4, x, y, r);
// , snows[i].left, snows[i].top, snows[i].radius);2551,0.
// ra.addColorStop(0, "rgba(1ra.addColorStop(255,0,0,0.1,0.
// )";
// ctx.fillStyle = ra;
// ctx.arc(x, y, r, 0, 2 * Math.PI);
// ctx.fill();
// }
 //上記のように書かれた場合、アニメーション効果はありません
 //アニメーション効果を実現するには、それぞれの雪の粒子の特性を変動させる必要があります
 //タイマーを設定して、特性を定期的に変更します
 var timer = setInterval(function () {
 snow();
 //アニメーション効果を実現するには、キャンバスの内容をクリアする必要があります
 ctx.clearRect(0, 0, maxW, maxH);
 //それぞれの雪の粒子は、16msが変化する特性は
 //x、y座標、これらの値を変更するために新しい数値が必要です
 //再定義を避けるために、snows.radiusを直接利用して計算を行います
 for (var i = 0; i < snows.length; i++) {
 //最初はそれぞれの雪の粒子のx、y座標と半径r
 //これのように書くと、後の雪の粒子のデータが前のものを上書きします。このバグは長い時間をかけました
// var r = snows[i].radius;
// var x = snows[i].left;
// var y = snows[i].top;
// var d = snows[i].deg;
 //yの変化量
 var yChange = 0.5 * snows[i].radius;
 //xの変化量ここではxの変化量とyの変化量をsnows.degを通じて関連付けることができます
 //これにより、それぞれの雪の粒子が自分の軌道を描きます。また、それぞれの粒子に対して個別に設定することもできます。すべての雪の粒子の軌道は同じです
 var xChange = Math.tan(toRd(snows[i].deg)) * yChange; //ここでの三角関数はテストの結果、tanが最も適しています
 snows[i].top += yChange;
 snows[i].left += xChange;
 //上記のステップを経ることで、それぞれの雪の粒子のx、y座標が変更されます。時間が経つにつれて、
 //雪の粒子はキャンバスから飛び出し、最終的に消えます。これに対して判定を行い、snowsからキャンバス外の雪の粒子を削除します
 //中から削除して新しい雪の粒子を追加する、このステップは最後に実行し、ここではただ判定を行います
 if (snows[i].left < 0 || snows[i].left > maxW || snows[i].top > maxH) {
 //ここではx<0はxChangeが負の値を持つためです
 if(i>0){
  snows.splice(i--, 1);
  continue;//範囲を超えた場合
  // これではこの雪の粒子に対して後続のレンダリングは必要ないため、この判定はパフォーマンス消費を削減できます
 }
 }
 //レンダリングを開始します
 var ra = ctx.createRadialGradient(snows[i].left, snows[i].top, snows[i].radius / 4, snows[i].left, snows[i].top, snows[i].radius);
 , snows[i].left, snows[i].top, snows[i].radius);255,255,255,1,0.
 ra.addColorStop(0, "rgba(1ra.addColorStop(255,255,255, "rgba(1,0.
 )";
 ctx.fillStyle = ra;
 ctx.beginPath(); 2 * Math.PI);
 ctx.fill();
 }
 , 16);
 //雪の数を増やす
 //snows配列にメンバーを追加する
 function snow(){
 if(snows.length<220) {
 var l = 220 - snows.length;
 for(var i=0;i<l;i++{
 snows.push({
  "left": random(0, maxW),
  "top": 0,
  "deg": random(-20, 20), //データの更新に役立てる
  "radius": random(2, 10)
 }
 }
 }
 }

これで本文のすべての内容が終わります。本文の内容が皆様の学習や仕事に少しでも役立つことを願っています。また、呐喊チュートリアルを多くのサポートをお願いします。

声明：本文の内容はインターネットから提供され、著作権者はすべての権利を保有しています。インターネットユーザーによって自発的に提供され、アップロードされたコンテンツであり、本サイトは所有権を持ちません。また、人工編集は行われていません。著作権侵害が疑われる内容がある場合は、メールを送信してください：notice#oldtoolbag.com（メール送信時は、#を@に変更してください。報告を行い、関連する証拠を提供してください。一旦確認がとりあえず、本サイトは即座に侵害が疑われるコンテンツを削除します。）