/**

?* 雪花

?* canvas版

?*/

$(function() {

? ? /**

? ? ?* 雪球

? ? ?* @param {[type]} elementName [description]

? ? ?*/

? ? function Snowflake(elementName) {

? ? ? ? var config = {};

? ? ? ? var snowElement = document.getElementById(elementName)

? ? ? ? var canvasContext = snowElement.getContext("2d");

? ? ? ? var width = config.clientWidth;

? ? ? ? var height = config.clientHeight;

? ? ? ? //canvas尺寸修正

? ? ? ? snowElement.width = width;

? ? ? ? snowElement.height = height;

? ? ? ? //構(gòu)建雪球的數(shù)量

? ? ? ? var snowNumber = 50;

? ? ? ? //構(gòu)建雪球?qū)ο?/p>

? ? ? ? var snowArrObjs = initSnow(snowNumber, width, height);

? ? ? ? var snowArrNum = snowArrObjs.length;

? ? ? ? /**

? ? ? ? ?* 繪制頁面

? ? ? ? ?* @return {[type]} [description]

? ? ? ? ?*/

? ? ? ? var render = function() {

? ? ? ? ? ? //清理之前的矩形數(shù)據(jù)

? ? ? ? ? ? canvasContext.clearRect(0, 0, width, height);

? ? ? ? ? ? for (var i = 0; i < snowArrNum; ++i) {

? ? ? ? ? ? ? ? snowArrObjs[i].render(canvasContext);

? ? ? ? ? ? }

? ? ? ? }

? ? ? ? /**

? ? ? ? ?* 更新雪花

? ? ? ? ?* @return {[type]} [description]

? ? ? ? ?*/

? ? ? ? var update = function() {

? ? ? ? ? ? for (var i = 0; i < snowArrNum; ++i) {

? ? ? ? ? ? ? ? snowArrObjs[i].update();

? ? ? ? ? ? }

? ? ? ? }

? ? ? ? /**

? ? ? ? ?* 繪制與更新

? ? ? ? ?* @return {[type]} [description]

? ? ? ? ?*/

? ? ? ? var renderAndUpdate = function() {

? ? ? ? ? ? render();

? ? ? ? ? ? update();

? ? ? ? ? ? requestAnimationFrame(renderAndUpdate);

? ? ? ? }

? ? ? ? renderAndUpdate();

? ? }

? ? function initSnow(snowNumber, width, height) {

? ? ? ? //雪球參數(shù)

? ? ? ? var options = {

? ? ? ? ? ? //雪球的半球距離

? ? ? ? ? ? minRadius: 3,

? ? ? ? ? ? maxRadius: 10,

? ? ? ? ? ? // 運(yùn)動的范圍區(qū)域

? ? ? ? ? ? maxX: width,

? ? ? ? ? ? maxY: height,

? ? ? ? ? ? //速率

? ? ? ? ? ? minSpeedY: 0.05,

? ? ? ? ? ? maxSpeedY: 2,

? ? ? ? ? ? speedX: 0.05,

? ? ? ? ? ? //濾鏡

? ? ? ? ? ? minAlpha: 0.5,

? ? ? ? ? ? maxAlpha: 1.0,

? ? ? ? ? ? minMoveX: 4,

? ? ? ? ? ? maxMoveX: 18

? ? ? ? }

? ? ? ? var snowArr = [];

? ? ? ? for (var i = 0; i < snowNumber; ++i) {

? ? ? ? ? ? snowArr[i] = new Snow(options);

? ? ? ? }

? ? ? ? return snowArr;

? ? }

? ? /**

? ? ?* 雪球類

? ? ?*/

? ? function Snow(snowSettings) {

? ? ? ? this.snowSettings = snowSettings;

? ? ? ? this.radius = randomInRange(snowSettings.minRadius, snowSettings.maxRadius);

? ? ? ? //初始的x位置

? ? ? ? this.initialX = Math.random() * snowSettings.maxX;

? ? ? ? this.y = -(Math.random() * 500);

? ? ? ? //運(yùn)行的速率

? ? ? ? this.speedY = randomInRange(snowSettings.minSpeedY, snowSettings.maxSpeedY);

? ? ? ? this.speedX = snowSettings.speedX;

? ? ? ? //濾鏡

? ? ? ? this.alpha = randomInRange(snowSettings.minAlpha, snowSettings.maxAlpha);

? ? ? ? //角度.默認(rèn)是360

? ? ? ? this.angle = Math.random(Math.PI * 2);

? ? ? ? //運(yùn)行的距離

? ? ? ? this.x = this.initialX + Math.sin(this.angle);

? ? ? ? //x移動距離

? ? ? ? this.moveX = randomInRange(snowSettings.minMoveX, snowSettings.maxMoveX);

? ? }

? ? /**

? ? ?* 繪制雪球

? ? ?* @param? {[type]} canvasContext [description]

? ? ?* @return {[type]}? ? ? ? ? ? ? ?[description]

? ? ?*/

? ? Snow.prototype.render = function(canvasContext) {

? ? ? ? //清除路徑

? ? ? ? //開始一個畫布中的一條新路徑（或者子路徑的一個集合）

? ? ? ? canvasContext.beginPath();

? ? ? ? //用來填充路徑的當(dāng)前的顏色，白色的雪球

? ? ? ? canvasContext.fillStyle = "rgba(255, 255, 255, " + this.alpha + ")";

? ? ? ? //一個中心點(diǎn)和半徑，為一個畫布的當(dāng)前子路徑添加一條弧線

? ? ? ? //坐標(biāo)，圓，沿著圓指定弧的開始點(diǎn)和結(jié)束點(diǎn)的一個角度

? ? ? ? //弧沿著圓周的逆時(shí)針方向（TRUE）還是順時(shí)針方向（FALSE）遍歷

? ? ? ? canvasContext.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);

? ? ? ? //關(guān)閉子路徑

? ? ? ? canvasContext.closePath();

? ? ? ? //fill() 方法使用 fillStyle 屬性所指定的顏色、漸變和模式來填充當(dāng)前路徑

? ? ? ? canvasContext.fill();

? ? }

? ? Snow.prototype.update = function() {

? ? ? ? this.y += this.speedY;

? ? ? ? if (this.y > this.snowSettings.maxY) {

? ? ? ? ? ? this.y -= this.snowSettings.maxY;

? ? ? ? }

? ? ? ? this.angle += this.speedX;

? ? ? ? if (this.angle > Math.PI * 2) {

? ? ? ? ? ? this.angle -= Math.PI * 2;

? ? ? ? }

? ? ? ? this.x = this.initialX + this.moveX * Math.sin(this.angle);

? ? }

? ? /**

? ? ?* 隨機(jī)處理

? ? ?* @param? {[type]} min [description]

? ? ?* @param? {[type]} max [description]

? ? ?* @return {[type]}? ? ?[description]

? ? ?*/

? ? function randomInRange(min, max) {

? ? ? ? var random = Math.random() * (max - min) + min;

? ? ? ? return random;

? ? }

? ? Snowflake("snowflake")

})