最近暑くて雪が恋しいので、JavaScriptでしんしんと降る雪を作ってみました。

HTMLコードは以下の通り。

<canvas id="snowField" width="640" height="640"></canvas>

JavaScriptのコードは以下の通り。

const canvas = document.getElementById('snowField');
const ctx = canvas.getContext('2d');
let snow = [];
let maxSnow = 100; //1度に降る雪の数
function createSnow() {
  snow.push({
    x: Math.floor(Math.random() * canvas.width),
    y: Math.floor(Math.random() * canvas.height),
    size: Math.random() * 2 + 1,
    speed: Math.random() * 0.5 + 0.2,
    opacity: Math.random()
  });
}
function drawSnow() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (let i = 0; i < snow.length; i++) {
    let snowflake = snow[i];
    ctx.beginPath();
    ctx.arc(snowflake.x, snowflake.y, snowflake.size, 0, 2 * Math.PI);
    ctx.fillStyle = `rgba(255, 255, 255, ${snowflake.opacity})`;
    ctx.fill();
    snowflake.y += snowflake.speed;
    if (snowflake.y > canvas.height) {
      snowflake.y = 0;
    }
  }
  requestAnimationFrame(drawSnow);
}
for (let i = 0; i < maxSnow; i++) {
  createSnow();
}
drawSnow();

気分だけは涼しくなりました。いったい暑さはいつまで続くのでしょうか…。

おしまい♥