使用canvas和javaScript实现一个超炫酷的场景（附上代码）

最新推荐文章于 2023-06-17 16:52:41 发布

喜鹊.

最新推荐文章于 2023-06-17 16:52:41 发布

阅读量321

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/lyk_xz/article/details/129976812

版权

今天是2023年4月五日，是我自2021以来的第二次创作，希望能够获得更多支持，一起进步，如果想了解其他关于前端或者别的方面的知识可以留言我我在私下会持续创作，尽量满足各位小伙伴安排的工作，好了接下来步入今天的主题
下面附上的这个视频就是我通过canvas和javaScript实现的一个场景感兴趣的小伙伴可以看下去，不感兴趣就可以划走了
请添加图片描述
首先我们要知道canvas是干嘛的，Canvas是HTML5的一个新特性，canvas又叫做画板。顾名思义，我们可以在canvas上绘制我们需要的图形。最开始，canvas它是由苹果公司提出的，当时不叫canvas，叫widget，因为HTML并不存在一套二维的绘图API。Canvas本身是一个HTML元素，需要HTML元素的配合高度和宽度属性而定义出的一块可绘制区域，定义区域之后使用JavaScript的脚本绘制图像的HTML元素。好下面附上这个场景的代码，代码中加有注释看不懂的直接复制代码去尝试一下就懂了

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>超炫酷的场景</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: black;
      }
      canvas {
        position: absolute;
        left: 0;
        top: 0;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <script>
      // 获取画布元素
      var canvas = document.getElementById('canvas');
      // 设置画布尺寸
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      // 获取画布上下文
      var ctx = canvas.getContext('2d');

      // 定义粒子对象
      function Particle(x, y, radius, color) {
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.color = color;
        this.velocity = {
          x: Math.random() * 4 - 2, // 随机的x轴速度
          y: Math.random() * 4 - 2 // 随机的y轴速度
        };
        // 更新位置
        this.update = function() {
          this.x += this.velocity.x;
          this.y += this.velocity.y;
        };
        // 绘制
        this.draw = function() {
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
          ctx.fillStyle = this.color;
          ctx.fill();
          ctx.closePath();
        };
      }

      var particles = []; // 保存粒子的数组
      var hue = 0; // 色调
      var mouse = { // 鼠标位置
        x: undefined,
        y: undefined
      };

      // 监听鼠标移动事件
      window.addEventListener('mousemove', function(e) {
        mouse.x = e.x;
        mouse.y = e.y;
      });

      // 创建粒子
      function createParticle() {
        var x = mouse.x;
        var y = mouse.y;
        var radius = Math.random() * 10 + 2; // 随机的粒子半径
        var color = 'hsl(' + hue + ', 100%, 50%)'; // 根据色调创建颜色
        particles.push(new Particle(x, y, radius, color));
      }

      // 更新画面
      function update() {
        // 创建粒子
        createParticle();
        // 更新粒子位置
        for (var i = 0; i < particles.length; i++) {
          particles[i].update();
        }
        // 移除离屏的粒子
        for (var i = 0; i < particles.length; i++) {
          if (particles[i].x < -50 ||
              particles[i].x > window.innerWidth + 50 ||
              particles[i].y < -50 ||
              particles[i].y > window.innerHeight + 50) {
            particles.splice(i, 1);
          }
        }
        // 更新色调
        hue += 2;
        // 重绘画面
        draw();
      }

      // 绘制画面
      function draw() {
        // 清除画布
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        // 绘制粒子
        for (var i = 0; i < particles.length; i++) {
          particles[i].draw();
        }
        // 绘制连接线
        for (var i = 0; i < particles.length; i++) {
          for (var j = i + 1; j < particles.length; j++) {
            var distance = Math.sqrt(
              (particles[i].x - particles[j].x) ** 2 +
              (particles[i].y - particles[j].y) ** 2
            );
            if (distance < 100) {
              ctx.beginPath();
              ctx.moveTo(particles[i].x, particles[i].y);
              ctx.lineTo(particles[j].x, particles[j].y);
              ctx.strokeStyle = particles[i].color;
              ctx.lineWidth = 2;
              ctx.stroke();
              ctx.closePath();
            }
          }
        }
      }

      // 开始循环更新画面
      setInterval(update, 1000 / 60);
    </script>
  </body>
  </html>

祝你好运，狗头保命
在这里插入图片描述