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变量控制每个星星的大小。

相关推荐
datacollectionspecia3 分钟前
优化无头浏览器流量:使用Puppeteer进行高效数据抓取的成本降低策略
python·html
一天睡25小时10 分钟前
视频HLS分片与关键帧优化深度解析
前端·javascript
Java~~14 分钟前
山东大学软件学院项目实训-基于大模型的模拟面试系统-网页图片显示问题
javascript·vue.js
程序员爱钓鱼38 分钟前
从零开始开发一个简易的五子棋游戏:使用 HTML、CSS 和 JavaScript 实现双人对战
前端·javascript·游戏开发
林太白41 分钟前
NestJS企业级登录注册如何做
前端·javascript·后端
JQShan1 小时前
React Native小课堂:箭头函数 vs 普通函数,为什么你的this总迷路?
javascript·react native·ios
至尊童1 小时前
5个Web开发中的使用技巧
javascript·html
前端大白话1 小时前
前端人必看!10个Vue3救命技巧,专治性能差、代码乱
前端·javascript·vue.js
江城开朗的豌豆1 小时前
JavaScript篇:JavaScript中的深浅拷贝:原理、实现与应用
前端·javascript·面试
爱看书的小沐1 小时前
【小沐学Web3D】three.js 加载三维模型(Svelte.js)
javascript·vue.js·webgl·three.js·opengl·web3d·svelte.js