溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
使用JavaScript怎么實現一個雪花飄落特效？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。
首先我們要創建一個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>在上面的代碼中，我們創建了一個canvas畫布，并且設置他為浮動，背景色無（如果這里不設置浮動，那么等下獲取整個屏幕的大小賦給他的時候是會產生邊距的）
接下來的JavaScript代碼
<script>
//獲取屏幕最大長寬
var maxWidth = document.documentElement.clientWidth;
var maxHeight = document.documentElement.clientHeight;
//獲取canvas畫布
var canvasObj = document.getElementById('myCanvas');
//將屏幕的長寬賦給畫布
canvasObj.width = maxWidth;
canvasObj.height = maxHeight;
//創建雪花圖形(白色的圓形)
var cxt = canvasObj.getContext('2d');
//設置雪花的個數
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()
//調用雪花移動效果
}
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);
//調用計時器
</script>看完上述內容，你們掌握使用JavaScript怎么實現一個雪花飄落特效的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
