HTML5和JS实现明媚月色效果

先给出效果图：

源码如下：

<!DOCTYPE html>
<html>
<head>
  <title>明媚月光效果</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      background-color: #000; /* 添加一个深色背景以便看到月光效果 */
    }
    #moonlightCanvas {
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
</head>
<body>
  <canvas id="moonlightCanvas"></canvas>

  <script>
    window.addEventListener("load", function() {
      function drawMoonlight() {
        var canvas = document.getElementById("moonlightCanvas");
        var ctx = canvas.getContext("2d");

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

        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var moonRadius = 50; // 月亮的半径，您可以根据需要调整大小

        // 绘制星星
        function drawStars() {
          var starCount = 50; // 星星的数量
          for (var i = 0; i < starCount; i++) {
            var x = Math.random() * canvas.width;
            var y = Math.random() * canvas.height;
            var starRadius = Math.random() * 2.5; // 星星的大小
            ctx.beginPath();
            ctx.arc(x, y, starRadius, 0, Math.PI * 2, false);
            ctx.fillStyle = "yellow";
            ctx.fill();
          }
	  for (var i = 0; i < starCount; i++) {
            var x = Math.random() * canvas.width;
            var y = Math.random() * canvas.height;
            var starRadius = Math.random() * 2.5; // 星星的大小
            ctx.beginPath();
            ctx.arc(x, y, starRadius, 0, Math.PI * 2, false);
            ctx.fillStyle = "white";
            ctx.fill();
          }
        }

        drawStars(); // 绘制星星

        // 绘制月亮
        ctx.beginPath();
        ctx.arc(centerX, centerY, moonRadius, 0, 2 * Math.PI, false);
        ctx.fillStyle = "rgba(255, 255, 255, 1)"; // 不透明的白色
        ctx.fill();

        // 绘制明媚月光效果
        var gradient = ctx.createRadialGradient(centerX, centerY, moonRadius, centerX, centerY, canvas.width);
        gradient.addColorStop(0, "rgba(173, 216, 230, 0.3)"); // 浅蓝色半透明
        gradient.addColorStop(1, "rgba(255, 255, 255, 0)"); // 完全透明

        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
      }

      drawMoonlight();
    });
  </script>
</body>
</html>

绘制一个代表月亮的圆形，月亮的半径设置为了一个固定值（moonRadius = 50;），可以根据自己的需要调整这个值。然后在它的周围添加了一个更大的渐变来模拟散发的月光效果。你可以尝试修改渐变的颜色或透明度。drawStars函数来绘制星星，这个函数通过在画布上随机位置画上小点来模拟星星。starCount变量控制星星的数量，而starRadius变量控制每个星星的大小。

HTML5和JS实现明媚月色效果

HTML5和JS实现明媚月色效果

猜你喜欢