請用canvas寫一個關於520浪漫表白的程式碼

王铁柱6發表於2024-11-22
Canvas
<!DOCTYPE html>
<html>
<head>
<title>520浪漫表白</title>
<style>
body { margin: 0; overflow: hidden; background-color: #000; }
canvas { display: block; }
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const heartSize = 20;
const hearts = [];

function createHeart(x, y, vx, vy, color) {
  return { x, y, vx, vy, color };
}

function drawHeart(heart) {
  ctx.beginPath();
  ctx.fillStyle = heart.color;
  ctx.moveTo(heart.x, heart.y);
  ctx.bezierCurveTo(heart.x - heartSize / 2, heart.y - heartSize, heart.x - heartSize, heart.y - heartSize / 2, heart.x, heart.y - heartSize * 1.5);
  ctx.bezierCurveTo(heart.x + heartSize, heart.y - heartSize / 2, heart.x + heartSize / 2, heart.y - heartSize, heart.x, heart.y);
  ctx.fill();
}

function animate() {
  requestAnimationFrame(animate);
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  if (Math.random() < 0.1) { // 控制心形出現的頻率
    const x = Math.random() * canvas.width;
    const y = canvas.height;
    const vx = (Math.random() - 0.5) * 2; // x 方向速度
    const vy = -Math.random() * 5 - 2; // y 方向速度
    const color = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`; // 隨機顏色
    //const color = `#FF69B4`;  //粉色
    hearts.push(createHeart(x, y, vx, vy, color));
  }

  for (let i = 0; i < hearts.length; i++) {
    const heart = hearts[i];
    heart.x += heart.vx;
    heart.y += heart.vy;
    drawHeart(heart);

    if (heart.y < -heartSize) { // 心形飄出螢幕頂部後移除
      hearts.splice(i, 1);
      i--; // 調整索引，避免跳過元素
    }
  }
}

// 新增文字
ctx.font = "30px Arial";
ctx.fillStyle = "white";
ctx.textAlign = "center";
ctx.fillText("520 我愛你", canvas.width / 2, canvas.height / 2);


animate();

// 調整 canvas 大小以適應視窗變化
window.addEventListener('resize', () => {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  // 這裡需要重新繪製文字，因為 canvas 清空了
  ctx.font = "30px Arial";
  ctx.fillStyle = "white";
  ctx.textAlign = "center";
  ctx.fillText("520 我愛你", canvas.width / 2, canvas.height / 2);
});

</script>
</body>
</html>

這段程式碼會在黑色背景上不斷向上飄愛心，並帶有“520 我愛你”的文字。愛心顏色隨機，大小和出現頻率可以調整。主要改進包括：

  • 愛心形狀更優美: 使用貝塞爾曲線繪製更漂亮的愛心。
  • 顏色隨機: 愛心顏色隨機變化，更活潑。
  • 移除飄出螢幕的愛心: 最佳化效能，避免無限累積愛心物件。
  • 自適應視窗大小: canvas 大小會隨著視窗變化而調整，保持良好的顯示效果。
  • 文字始終居中: 即使視窗大小改變，文字也始終保持在螢幕中央。

使用方法：將程式碼儲存為 HTML 檔案，然後用瀏覽器開啟即可。

可以根據自己的喜好修改文字內容、顏色、愛心大小、出現頻率等引數，打造更個性化的表白效果。例如，可以將`const color =

相關文章