JS實現(xiàn)的雪花飄落特效示例
本文實例講述了JS實現(xiàn)的雪花飄落特效。分享給大家供大家參考，具體如下：
首先我們要創(chuàng)建一個HTML文件，將其命名為index.html
<!DOCTYPE html>
<html>
<head>
<title> Canvas - 雪花特效 </title>
<meta charset="utf-8">
<style>
*{
margin:0px;
padding:0px;
}
.myCanvas{
float:left;
background:rgba(0,0,0,0);
}
</style>
</head>
<body>
<canvas id="myCanvas" class="myCanvas"> </canvas>
</body>
</html>
在上面的代碼中，我們創(chuàng)建了一個canvas畫布，并且設置他為浮動，背景色無（如果這里不設置浮動，那么等下獲取整個屏幕的大小賦給他的時候是會產(chǎn)生邊距的）
接下來的JavaScript代碼
<script>
//獲取屏幕最大長寬
var maxWidth = document.documentElement.clientWidth;
var maxHeight = document.documentElement.clientHeight;
//獲取canvas畫布
var canvasObj = document.getElementById('myCanvas');
//將屏幕的長寬賦給畫布
canvasObj.width = maxWidth;
canvasObj.height = maxHeight;
//創(chuàng)建雪花圖形(白色的圓形)
var cxt = canvasObj.getContext('2d');
//設置雪花的個數(shù)
var snowCount = 1000;
var objArray = [];
for(var index = 0;index < snowCount; index++){
objArray.push({
//隨機x軸位置
x : Math.random()*maxWidth,
//隨機y軸位置
y : Math.random()*maxHeight,
//隨機半徑大小
r : Math.random()*4+1,
//畫圓
drow : function() {
cxt.beginPath();
//填充色
cxt.fillstyle = "#fff";
//填充
cxt.fill();
//圓的屬性
cxt.arc(this.x,this.y,this.r,0,2*Math.PI);
//輸出圓
cxt.stroke();
}
});
}
function drawSnow() {
cxt.clearRect(0,0,maxWidth,maxHeight)
//清除0x軸，0y軸，最大屏幕x軸，最大屏幕y軸的圓形
for(var index = 0; index<objArray.length; index++) {
//把每個圓都畫出來
objArray[index].drow();
}
downLoadSnow()
//調(diào)用雪花移動效果
}
function downLoadSnow() {
for(var index = 0;index<objArray.length;index++){
if(objArray[index].x > maxWidth) {
objArray[index].x = 0;
//當移動的位置大于最大屏幕寬度時返回到0
} else {
objArray[index].x +=5;
//否則一直加下去
}
if(objArray[index].y > maxHeight) {
objArray[index].y = 0;
//當移動的位置大于最大屏幕高度時返回0
} else {
objArray[index].y +=5;
//否則一直加下去
}
}
}
setInterval("drawSnow()",30);
//調(diào)用計時器
</script>
到此雪花落下的結果就已經(jīng)實現(xiàn)了
這里使用在線HTML/CSS/JavaScript前端代碼調(diào)試運行工具：http://tools.jb51.net/code/WebCodeRun測試上述代碼，可得如下運行效果：
更多關于JavaScript相關內(nèi)容感興趣的讀者可查看本站專題：《JavaScript運動效果與技巧匯總》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
JS循環(huán)遍歷ul中l(wèi)i的點擊事件給選中l(wèi)i添加css樣式(示例代碼)
對于一個ul中固定的li個數(shù)，當點擊其中一個li時，改變選中l(wèi)i的顏色；同時改變對應的另一個ul中l(wèi)i的顏色，怎么實現(xiàn)這個功能呢，下面小編給大家?guī)砹薺s循環(huán)遍歷ul中l(wèi)i的點擊事件，給給選中l(wèi)i添加css樣式，感興趣的朋友一起看看吧2023-07-07
JavaScript實現(xiàn)把數(shù)字轉(zhuǎn)換成中文
這篇文章主要介紹了JavaScript實現(xiàn)把數(shù)字轉(zhuǎn)換成中文,本文直接給出實例代碼,需要的朋友可以參考下2015-06-06
js打字效果示例js打字效果示例,data-period設置從打字返回刪字的時間，data-rotate可加減中英文詞語，不用jquery支持2014-01-01
bootstrap weebox 支持ajax的模態(tài)彈出框
本篇介紹的bootstrap weebox（支持ajax的模態(tài)彈出框），歷經(jīng)多次修改，目前版本已經(jīng)穩(wěn)定，整合了bootstrap的響應式，界面簡單，功能卻無比豐富，支持ajax、圖片預覽等等2017-02-02
bootstrap里bootstrap動態(tài)加載下拉框的實例講解
今天小編就為大家分享一篇bootstrap里bootstrap動態(tài)加載下拉框的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
使用js簡單實現(xiàn)下常用的左側導航效果為提高導航性能而生，各位朋友可以參考應用，希望對大家有所幫助2013-10-10
本文通過實例代碼給大家分享了JavaScript貪吃蛇小組件功能 ,需要的朋友可以參考下2017-08-08
javascript創(chuàng)建含數(shù)字字母的隨機字符串方法總結
如果想創(chuàng)建一個含有數(shù)字、字母（大小寫）或者符號的字符串，比如從[a-zA-Z0-9]集合中中創(chuàng)建一個隨機的字符串，長度為5.有沒有什么比較好的代碼呢？本文提供了幾種方法，包括自動改變字符集合。一起來學習下。2016-08-08
JS前端開發(fā)判斷是否是手機端并跳轉(zhuǎn)操作（小結）
這篇文章主要介紹了JS前端開發(fā)判斷是否是手機端并跳轉(zhuǎn)操作,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02
這篇文章主要介紹了微信小程序如何再次獲取用戶授權的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05