canvas繪製雪花飄落效果程式碼例項

admin發表於2017-03-19
Canvas

分享一段程式碼例項，它利用canvas實現了繪製雪花飄落的效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
<canvas id="canvas" style="background-color:black">您的瀏覽器暫不支援canvas</canvas>
<script>
var canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctx = canvas.getContext("2d");
var balls = [];

function draw(ball) {
  ctx.beginPath();
  ctx.arc(ball.x, ball.y, ball.r, 0, 2 * Math.PI);
  ctx.globalAlpha = 0.7;
  ctx.fillStyle = "#ffffff";
  ctx.shadowColor = "#ffffff";
  ctx.shadowBlur = 20;
  ctx.fill();
}

function star() {
  for (var i = 0; i < 1; i++) {
    var ball = {
      x: Math.random() * canvas.width / 2 + canvas.width / 2,
      y: 0,
      r: Math.random() * 4,
      vx: Math.random() - 0.5,
      vy: Math.random() + 1,
    }
    balls.push(ball);
  }
  drawball();
}

function drawball() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (var i = 0; i < balls.length; i++) {
    balls[i].x += balls[i].vx * 5; //改變x軸位置
    balls[i].y += balls[i].vy * 2; //Y軸
    balls[i].index = i;
    if (balls[i].y > canvas.height / 1.7) {
      balls.splice(balls[i].index, 1);
      continue;
    }
    draw(balls[i]);
  }
}
setInterval(function() {
  star();
}, 10);
</script>
</body>
</html>

相關文章