HTML5和JS实现明媚月色效果

HTML5和JS实现明媚月色效果

先给出效果图:

源码如下:

javascript 复制代码
<!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变量控制每个星星的大小。

相关推荐
blazer1 小时前
前端团队CSS标准的AI化尝试:一次RAG技术的深度应用
javascript·llm·agent
小时前端1 小时前
🚀 面试必问的8道JavaScript异步难题:搞懂这些秒杀90%的候选人
javascript·面试
刘永胜是我1 小时前
解决React热更新中"process is not defined"错误:一个稳定可靠的方案
前端·javascript
悠哉摸鱼大王1 小时前
从麦克风输入到传输给后端实现ASR
前端·javascript
Takklin1 小时前
JavaScript 面试笔记:作用域、变量提升、暂时性死区与 const 的可变性
javascript·面试
地方地方1 小时前
JavaScript 类型检测的终极方案:一个优雅的 getType 函数
前端·javascript
加洛斯1 小时前
AJAX 知识篇(2):Axios的核心配置
前端·javascript·ajax
Mintopia1 小时前
开源数据集在 WebAI 模型训练中的技术价值与风险:当我们把互联网塞进显存
前端·javascript·aigc
写不来代码的草莓熊1 小时前
vue前端面试题——记录一次面试当中遇到的题(3)
前端·javascript·vue.js
洛克大航海1 小时前
Ajax基本使用
java·javascript·ajax·okhttp