溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關怎么用canvas實現簡單的下雪效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
首先新建一個html文件，將body的背景設置為天空的那種深藍色，并創建一個canvas，canvas的操作邏輯都放在snow.js中：
<!DOCTYPE html>
<head>
<style>
body {
background-color: #102a54;
}
</style>
</head>
<body>
<canvas id='sky'></canvas>
<script src="snow.js"></script>
</body>
</html>canvas的操作將在頁面加載完之后執行，首先獲取到canvas的二維context，并將canvas寬高設置為window的寬高，確保天空背景鋪滿整個窗口。 snow.js：
window.onload = function () {
var canvas = document.getElementById('sky');
var ctx = canvas.getContext('2d');
var W = window.innerWidth;
var H = window.innerHeight;
canvas.width = W;
canvas.height = H;
}天空背景完成后，我們來創建雪花，思路比較簡單，我們讓屏幕上保持一個額定數量的雪花，并給每個雪花一個隨機的位置、隨機的大小以及隨機的下落速度：
...
var flakesCount = 100; // 雪花個數
var flakes = [];
for (var i = 0; i < flakesCount; i++) {
flakes.push({
x: Math.random() * W, // 雪花x軸位置
y: Math.random() * H, // 雪花y軸位置
r: Math.random() * 5 + 2, // 雪花的半徑
d: Math.random() + 1 // 雪花密度，用于控制下落速度
});
}接下來我們需要將這100個雪花繪制出來，簡單起見，我們就用一個個白色的小圓表示雪花：
function drawFlakes() {
ctx.clearRect(0, 0, W, H);
ctx.fillStyle = '#fff';
ctx.beginPath();
for (var i = 0; i < flakesCount; i++) {
var flake = flakes[i];
console.log(flake);
ctx.moveTo(flake.x, flake.y);
ctx.arc(flake.x, flake.y, flake.r, 0, Math.PI * 2, true);
}
ctx.fill();
moveFlakes(); // todo: 雪花飄動效果
}雪花繪制完成后，我們需要讓雪花動起來，有飄落的效果。我們思路是設置一個定時器，每隔25ms重新渲染一次canvas，每次渲染每個雪花往下移動一段距離，雪花密度越大下落速度越快。并且通過Math.sin函數營造出雪花左右飄動的效果，當雪花落到窗口外面后將雪花重新移動到窗口上方再次下落，實現如下：
var angle = 0;
function moveFlakes() {
angle += 0.01;
for (var i = 0; i < flakesCount; i++) {
var flake = flakes[i];
flake.y += Math.pow(flake.d, 2) + 1; // 速度和密度實際上不是平方的關系，這么些是為了效果更加錯落有致
flake.x += Math.sin(angle) * 2;
if (flake.y > H) {
flakes[i] = { x: Math.random() * W, y: 0, r: flake.r, d: flake.d };
}
}
}
setInterval(drawFlakes, 25);完成，我們來看一下實際效果：
嗯，還挺像那么回事兒:)
完整代碼：
<!DOCTYPE html>
<head>
<style>
body {
background-color: #102a54;
}
</style>
</head>
<body>
<canvas id='sky'></canvas>
<script src="snow.js"></script>
</body>
</html>window.onload = function () {
// get the canvas and context
var canvas = document.getElementById('sky');
var ctx = canvas.getContext('2d');
// set canvas dims to window height and width
var W = window.innerWidth;
var H = window.innerHeight;
canvas.width = W;
canvas.height = H;
// generate snowflakes and apply attributes
var flakesCount = 100;
var flakes = []; // flake instances
// loop through the empty flakes and apply attributes
for (var i = 0; i < flakesCount; i++) {
flakes.push({
x: Math.random() * W,
y: Math.random() * H,
r: Math.random() * 5 + 2, // 2px - 7px
d: Math.random() + 1
});
}
// draw flakes onto canvas
function drawFlakes() {
ctx.clearRect(0, 0, W, H);
ctx.fillStyle = '#fff';
ctx.beginPath();
for (var i = 0; i < flakesCount; i++) {
var flake = flakes[i];
ctx.moveTo(flake.x, flake.y);
ctx.arc(flake.x, flake.y, flake.r, 0, Math.PI * 2, true);
}
ctx.fill();
moveFlakes();
}
var angle = 0;
function moveFlakes() {
angle += 0.01;
for (var i = 0; i < flakesCount; i++) {
var flake = flakes[i];
flake.y += Math.pow(flake.d, 2) + 1;
flake.x += Math.sin(angle) * 2;
if (flake.y > H) {
flakes[i] = { x: Math.random() * W, y: 0, r: flake.r, d: flake.d };
}
}
}
setInterval(drawFlakes, 25);
}關于怎么用canvas實現簡單的下雪效果就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
