元宵佳节放飞孔明灯：用Canvas点亮夜空许下心愿

前端

2023-10-08 05:46:05

用Canvas飞扬梦想，点亮元宵夜

元宵佳节，又称上元节，是中国传统节日之一。在这一天，人们会赏花灯、吃汤圆、猜灯谜，还有放孔明灯的习俗。孔明灯，又称天灯、许愿灯，是一种古老的传统文化。在元宵节的夜晚，人们将点燃的孔明灯放飞到空中，寄托着美好的愿望。

随着科技的发展，我们也可以用Canvas来制作在线的孔明灯许愿活动。既环保又绿化，还充满着节日气氛。

准备工作

在开始之前，我们需要准备以下材料：

HTML文件
CSS文件
JavaScript文件
Canvas元素

HTML文件

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <canvas id="canvas"></canvas>

  <script src="script.js"></script>
</body>
</html>

CSS文件

#canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

JavaScript文件

// 获取Canvas元素
var canvas = document.getElementById("canvas");

// 设置Canvas的宽高
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 获取Canvas的上下文
var ctx = canvas.getContext("2d");

// 设置画布背景色
ctx.fillStyle = "#000";
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 定义孔明灯的形状
var lamp = {
  x: canvas.width / 2,
  y: canvas.height,
  radius: 50,
  vx: 0,
  vy: -1
};

// 定义火焰的形状
var flame = {
  x: lamp.x,
  y: lamp.y - lamp.radius,
  radius: 10,
  vx: 0,
  vy: -2
};

// 绘制孔明灯
function drawLamp() {
  // 绘制圆形
  ctx.beginPath();
  ctx.arc(lamp.x, lamp.y, lamp.radius, 0, 2 * Math.PI);
  ctx.fillStyle = "#FF9900";
  ctx.fill();

  // 绘制十字线
  ctx.beginPath();
  ctx.moveTo(lamp.x - lamp.radius / 2, lamp.y);
  ctx.lineTo(lamp.x + lamp.radius / 2, lamp.y);
  ctx.moveTo(lamp.x, lamp.y - lamp.radius / 2);
  ctx.lineTo(lamp.x, lamp.y + lamp.radius / 2);
  ctx.strokeStyle = "#000";
  ctx.stroke();
}

// 绘制火焰
function drawFlame() {
  // 绘制圆形
  ctx.beginPath();
  ctx.arc(flame.x, flame.y, flame.radius, 0, 2 * Math.PI);
  ctx.fillStyle = "#FFD700";
  ctx.fill();
}

// 更新孔明灯的位置
function updateLamp() {
  // 更新速度
  lamp.vx += 0.01;
  lamp.vy += 0.01;

  // 更新位置
  lamp.x += lamp.vx;
  lamp.y += lamp.vy;

  // 判断是否超出边界
  if (lamp.x < 0 || lamp.x > canvas.width) {
    lamp.vx = -lamp.vx;
  }

  if (lamp.y < 0 || lamp.y > canvas.height) {
    lamp.vy = -lamp.vy;
  }
}

// 更新火焰的位置
function updateFlame() {
  // 更新速度
  flame.vx += 0.01;
  flame.vy += 0.01;

  // 更新位置
  flame.x += flame.vx;
  flame.y += flame.vy;

  // 判断是否超出边界
  if (flame.x < 0 || flame.x > canvas.width) {
    flame.vx = -flame.vx;
  }

  if (flame.y < 0 || flame.y > canvas.height) {
    flame.vy = -flame.vy;
  }
}

// 动画循环
function animate() {
  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制孔明灯
  drawLamp();

  // 绘制火焰
  drawFlame();

  // 更新孔明灯的位置
  updateLamp();

  // 更新火焰的位置
  updateFlame();

  // 下一帧继续执行动画循环
  requestAnimationFrame(animate);
}

// 开始动画循环
animate();