原生js canvas實現下雪效果

2021-09-05 12:41:24 字數 1696 閱讀 9669

/* 控制下雪 */

function snowfall(snow) ;

this.maxflake = snow.maxflake || 200; /* 最多片數 */

this.flakesize = snow.flakesize || 10; /* 雪花形狀 */

this.fallspeed = snow.fallspeed || 1; /* 墜落速度 */

} /* 相容寫法 */

requestanimationframe = window.requestanimationframe ||

window.mozrequestanimationframe ||

window.webkitrequestanimationframe ||

window.msrequestanimationframe ||

window.orequestanimationframe ||

function(callback) ;

cancelanimationframe = window.cancelanimationframe ||

window.mozcancelanimationframe ||

window.webkitcancelanimationframe ||

window.mscancelanimationframe ||

window.ocancelanimationframe;

/* 開始下雪 */

snowfall.prototype.start = function()

/* 建立畫布 */

function snowcanvas()

} /* 雪運動物件 */

function flakemove(canvaswidth, canvasheight, flakesize, fallspeed)

flakemove.prototype.update = function()

this.velx += math.cos(this.step += .05) * this.stepsize;

this.y += this.vely;

this.x += this.velx;

/* 飛出邊界的處理 */

if (this.x >= canvas.width || this.x <= 0 || this.y >= canvas.height || this.y <= 0)

};/* 飛出邊界-放置最頂端繼續墜落 */

flakemove.prototype.reset = function(width, height) ;

// 渲染雪花-隨機形狀(此處可修改雪花顏色!!!)

flakemove.prototype.render = function(ctx) ;

/* 建立雪花-定義形狀 */

function createflakes()

} /* 畫雪 */

function drawsnow()

/* 一幀一幀的畫 */

this.loop = requestanimationframe(function() );

} /* 呼叫及控制方法 */

var snow = new snowfall();

snow.start();

注意預設頁面背景色白色,雪花顏色也是白色

原生JS實現下拉載入

tips 實現的原理是通過獲取 獲取滾動條當前的位置 獲取當前可視範圍的高度 獲取文件完整的高度 一 獲取滾動條當前的位置 獲取滾動條當前的位置 function getscrolltop else if document.body return scrolltop 二 獲取當前可視範圍的高度 獲取...

自定義AlertDialog實現下彈窗效果

1,實現這個dialog其實最主要的是window的設定和dialog的主題設定,list是由resycleview實現的,下面直接上 private void initwindow 2,啟動的時候,可以傳入相應的主題theme,theme決定了你dialog的顯示樣式,先上theme的 3,啟動的...

原生JS Canvas實現五子棋遊戲

先看下現在做完的效果 線上體驗 主要功能模組為 1.人機對戰功能 2.悔棋功能 3.撤銷悔棋功能 從效果圖可以看到,棋盤的橫豎可以放的位置為15 15,通過canvas畫棋盤 繪畫棋盤 var drawchessboard function 知道格仔數後,我們先看五子棋有多少種贏法 贏法陣列 var...