クリスマスだしcanvasで雪を降らせるJS書いてみた

こんにちは、デザイナーのスギヤマです。 今日は、クリスマスイブですね。 個人的にクリスマスは静かに雪が降っていて、綺麗と言ったイメージがあります。 なので気分だけでもそんな雰囲気を味わうべく、色々参考にしながらcanvasの勉強を兼ねて雪を振らせるJSを書いてみました。 以下で簡単説明していきます。 サンプルコード サンプルおよび記事トップ写真 : 東京駅丸の内正面通りからの夜景 色々準備する canvasを使うための準備をしていきます。 今回はブラウザーのウィンドウにフィットする様に表示させる方向で進めます。 canvasの表示領域は、設定しないと可変にならないようなので、 リサイズイベントを検知してcanvasのサイズを変えるよう指定します。 snow.js /*———————— canvas要素の取得と設定 ————————-*/ //canvas要素の取得 var canvas = document.getElementById(‘canvas’);//canvasを取得 var ctx = canvas.getContext(‘2d’);//canvasのコンテキストを取得 //canvasサイズの設定 var wd_width = window.innerWidth; //ウィンドウ幅をキャンバス幅に。 var wd_height = window.innerHeight; //ウィンドウ高をキャンバス高に。 ctx.canvas.width = wd_width; ctx.canvas.height = wd_height; /*———————————————— ループ処理「requestAnimFrame」のベンダープレフィクス ————————————————-*/ var animFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback){ window.setTimeout(callback, 1000 / 60); }; /*———————— canvasサイズを可変にする ————————-*/ function canvas_resize(){ var rswd_width = window.innerWidth; var rswd_height = window.innerHeight; canvas.setAttribute(‘width’,rswd_width); canvas.setAttribute(‘height’,rswd_height); } //リサイズイベントを拾って実行 window.addEventListener(‘resize’,canvas_resize,false); canvas_resize(); 雪の粒を描く 雪の粒を作成していきます。 雪の粒は、 丸い ふわふわしている 白い 感じなので、これを表現できるようにします。 白い円が外側に向かって、グラデーションで透明になっていけば大丈夫そうです。 また、雪の粒をランダムな位置に表示したいので、乱数を使う準備が必要です。 以下の個所で諸々指定しています。 snow.js /*———————— 乱数 min から max までの乱整数を返す関数 Math.round() を用いると、非一様分布になります ————————-*/ function getRandomInt(min, max) { return Math.floor( Math.random() * (max – min + 1) ) + min; } /*———————— 雪の設定 ————————-*/ // 雪の粒の初期位置とサイズの設定 function snow(){ this.position_x = getRandomInt(0, wd_width); this.position_y = getRandomInt(0, wd_height); this.snow_size = getRandomInt(1, 4); this.speed = getRandomInt(1, 3); //落下速度 this.wind = getRandomInt(0, 0.5); //横風の強さ } // 雪の粒の描画 snow.prototype.draw = function() { var snow_grad = ctx.createRadialGradient( this.position_x, this.position_y, this.snow_size * 0.6, this.position_x, this.position_y, this.snow_size ); /* グラデーション終点のオフセットと色をセット */ snow_grad.addColorStop(0,’rgba(225, 225, 225, 0.8)’); snow_grad.addColorStop(0.5,’rgba(225, 225, 225, … Continue reading クリスマスだしcanvasで雪を降らせるJS書いてみた