장면 사진
장면 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Snow</title>
<style type="text/css">
*{
margin:0;
padding:0
}
#c1{
margin:20px auto;
display: block;
}
body {
margin: 0;
padding: 0;
background: url(img/xue.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<canvas id='sky'></canvas>
<script>
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 = 400; // 雪花个数
var flakes = [];
for (var i = 0; i < flakesCount; i++) {
flakes.push({
x: Math.random() * W, // 雪花x轴位置
y: Math.random() * H, // 雪花y轴位置
r: Math.random(10) * 5 + 2, // 雪花的半径
d: Math.random(10) + 1 // 雪花密度,用于控制下落速度
});
}
setInterval(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(); // todo: 雪花飘动效果
},30);
var angle = 0;
function moveFlakes() {
angle += 0.03;
for (var i = 0; i < flakesCount; i++) {
var flake = flakes[i];
flake.y += Math.pow(flake.d, 3) + 1;
var rd = Math.random(10) + 1;
if (rd <= 5) flake.x += Math.cos(angle) * 2;
else flake.x -= Math.cos(angle) * 2;
if (flake.y > H) {
flakes[i] = {
x: Math.random() * W,
y: 0,
r: flake.r,
d: flake.d
};
}
}
}
}
</script>
</body>
</html>