クリスマスだし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 … Continue reading クリスマスだしcanvasで雪を降らせるJS書いてみた