当前位置：首页 > JavaScript

js实现月亮

2026-02-01 19:28:25JavaScript

使用Canvas绘制月亮

在HTML中创建一个Canvas元素，通过JavaScript绘制月亮形状。使用arc方法绘制两个圆形，通过叠加形成月牙效果。

<canvas id="moonCanvas" width="200" height="200"></canvas>
<script>
  const canvas = document.getElementById('moonCanvas');
  const ctx = canvas.getContext('2d');

  ctx.fillStyle = '#FDB813';
  ctx.beginPath();
  ctx.arc(100, 100, 80, 0.5 * Math.PI, 1.5 * Math.PI);
  ctx.arc(60, 100, 80, 1.5 * Math.PI, 0.5 * Math.PI, true);
  ctx.fill();
</script>

使用CSS绘制月亮

通过CSS的box-shadow和border-radius属性创建月亮效果。这种方法不需要JavaScript，纯CSS实现。

<div class="moon"></div>
<style>
  .moon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    box-shadow: 25px 25px 0 0 #FDB813;
  }
</style>

使用SVG绘制月亮

SVG矢量图形适合创建可缩放的月亮图标。使用path元素定义月牙形状。

<svg width="200" height="200" viewBox="0 0 200 200">
  <path d="M100,20 A80,80 0 1,1 100,180 A60,60 0 1,0 100,20 Z" fill="#FDB813"/>
</svg>

动画效果实现

为月亮添加旋转动画效果，结合CSS的transform和animation属性。

<div class="animated-moon"></div>
<style>
  .animated-moon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    box-shadow: 25px 25px 0 0 #FDB813;
    animation: rotate 5s infinite linear;
  }

  @keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
</style>

响应式月亮设计

使用CSS的vw单位确保月亮大小随视窗变化，适合响应式布局。

js实现月亮

<div class="responsive-moon"></div>
<style>
  .responsive-moon {
    width: 10vw;
    height: 10vw;
    border-radius: 50%;
    box-shadow: 2.5vw 2.5vw 0 0 #FDB813;
  }
</style>