Canvasでクールで素晴らしいパーティクルと流星の効果を実現する方法は?
酷炫的粒子和流星效果を実現するために、Canvasを使用してアニメーションを描画することができます。以下はこの効果を実現するための簡単なサンプルコードです:
- HTMLファイルを作成し、その中にCanvas要素を追加してください。
<canvas id="canvas" width="800" height="600"></canvas>
- JavaScriptでコードを書いて、パーティクルと流星の効果を実現します。
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let particles = [];
function createParticles() {
for (let i = 0; i < 100; i++) {
let particle = {
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
speedX: Math.random() * 4 - 2,
speedY: Math.random() * 4 - 2,
color: 'white',
size: Math.random() * 3 + 1
};
particles.push(particle);
}
}
function drawParticles() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < particles.length; i++) {
let particle = particles[i];
ctx.fillStyle = particle.color;
ctx.beginPath();
ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
ctx.fill();
particle.x += particle.speedX;
particle.y += particle.speedY;
if (particle.x > canvas.width || particle.x < 0) {
particle.speedX *= -1;
}
if (particle.y > canvas.height || particle.y < 0) {
particle.speedY *= -1;
}
}
}
function createMeteor() {
let meteor = {
x: Math.random() * canvas.width,
y: 0,
speedY: Math.random() * 4 + 2,
color: 'red',
size: Math.random() * 5 + 2
};
particles.push(meteor);
}
function draw() {
createParticles();
setInterval(() => {
createMeteor();
}, 3000);
setInterval(() => {
drawParticles();
}, 1000 / 60);
}
draw();
Canvas上に100個の白い粒子を描画し、3秒ごとに赤い流れ星を生成します。粒子の速度や位置を制御することで、さまざまな効果を実現できます。より派手な効果を実現するために、必要に応じてコード内のパラメータを調整できます。