DIY银月：利用Canvas模拟真实的月相变化

2024-01-03 00:20:48

模拟月相变幻，解码天际之谜

引言

漫步在银河之下，仰望夜空，一轮皎洁的明月高悬穹顶，令人心生无限遐思。月相的更迭，从新月到满月，勾勒出时间的流逝，激发着人类的探索热情。如今，借助计算机图形技术，我们可以在数字世界中再现这一天际奇观，揭开月相变幻的奥秘。

Canvas绘月，挥洒银色光辉

如同一幅壮美的画卷，月相变化是自然界最迷人的一笔。借助Canvas，我们能够将这幅画卷搬上电脑屏幕，细腻地呈现从新月到满月的过程。

通过创建一个圆形路径，我们勾勒出月亮的轮廓。而利用两个半圆作为相位，巧妙地遮挡住月亮，模拟出月相变幻的效果。当新月悄然升起，两个半圆完全遮蔽了月亮的光辉；当满月当空，两个半圆隐去，让皎洁的月光洒满大地；而当上弦月或下弦月悬挂天际时，两个半圆部分遮挡月亮，勾勒出优美的月牙状。

缩放之妙，演绎月相更迭

缩放是模拟月相变化的关键。当月亮处于新月状态时，两个半圆完全遮挡住月亮；当月亮处于满月状态时，两个半圆完全露出月亮；而当月亮处于上弦月或下弦月状态时，两个半圆部分遮挡住月亮，呈现出优美的月牙状。

// 绘制银色月亮
let moon = new Path2D();
moon.arc(0, 0, radius, 0, 2 * Math.PI);

// 绘制两个半圆，用于模拟月相变化
let phase1 = new Path2D();
phase1.arc(0, 0, radius, Math.PI / 2, 3 * Math.PI / 2);
let phase2 = new Path2D();
phase2.arc(0, 0, radius, -Math.PI / 2, Math.PI / 2);

// 控制月相变化的缩放比例
let scale = 1;

// 绘制月亮及月相变化
function drawMoon() {
  ctx.fillStyle = 'silver';
  ctx.fill(moon);

  // 根据缩放比例调整两个半圆的大小，模拟月相变化
  ctx.scale(scale, scale);
  ctx.fillStyle = 'black';
  ctx.fill(phase1);
  ctx.fill(phase2);
  ctx.setTransform(1, 0, 0, 1, 0, 0);

  // 调整缩放比例，实现月相变化的动态效果
  scale -= 0.01;
  if (scale < 0) {
    scale = 1;
  }
}

// 启动动画循环，实现月相变化的动态效果
setInterval(drawMoon, 10);