1. Python技术站首页
  2. 其他
  3. JavaScript

js实现三角形粒子运动

• JavaScript

当我们需要实现三角形形式的粒子运动效果时，可以使用JavaScript来实现。下面是实现的完整攻略。

步骤一：准备工作

首先要准备好基本的HTML和CSS代码，用来在页面上展示三角形和粒子运动效果。

其中HTML需要包含一个canvas元素，用来在页面上绘制三角形和粒子，代码如下：

<canvas id="canvas"></canvas>

CSS代码用来定义canvas元素的宽度和高度，代码如下：

#canvas{
    width: 100%;
    height: 100%;
}

步骤二：绘制三角形

接下来要通过JavaScript代码来绘制一个等边三角形，并在canvas上显示出来。

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(0, 100);
ctx.fillStyle = "red";
ctx.fill();

以上代码会在canvas上绘制一个红色的等边三角形，三角形的三个顶点坐标分别为(50, 50)、(100, 100)、(0, 100)。

步骤三：绘制粒子

接下来要通过JavaScript代码来实现粒子运动效果。具体实现方法是在页面中生成一定数量的粒子，并让它们沿着三角形的边缘滑动。

下面是绘制粒子的代码：

var particleCount = 50; // 设置粒子数量
var particles = [];

for (var i = 0; i < particleCount; i++) {
  particles.push({
    x: getRandomInt(0, c.width),
    y: getRandomInt(0, c.height),
    speed: 0.5,
    angle: getRandomInt(0, 360),
    radius: getRandomInt(2, 4)
  });
}

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function drawParticles() {
  for (var i = 0; i < particles.length; i++) {
    var p = particles[i];
    ctx.beginPath();
    ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fill();
  }
}

function updateParticles() {
  for (var i = 0; i < particles.length; i++) {
    var p = particles[i];
    var vx = Math.cos(p.angle) * p.speed;
    var vy = Math.sin(p.angle) * p.speed;
    p.x += vx;
    p.y += vy;
    if (p.x < 0 || p.x > c.width || p.y < 0 || p.y > c.height) {
      p.x = getRandomInt(0, c.width);
      p.y = getRandomInt(0, c.height);
      p.angle = getRandomInt(0, 360);
    }
  }
}

function loop() {
  ctx.clearRect(0, 0, c.width, c.height);
  drawParticles();
  updateParticles();
  requestAnimationFrame(loop);
}

loop();

以上代码中，通过定义一个数组来储存粒子的坐标、速度、角度和半径等信息。并通过循环遍历数组中的每个粒子，让它们沿着三角形的边缘移动。

示例一

下面是一条示例说明，演示了绘制一个蓝色等边三角形，并在三角形边缘绘制20个随机颜色的粒子，这些粒子会沿着三角形的边缘滑动，代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>Example 1</title>
    <style>
      #canvas {
        width: 100vw;
        height: 100vh;
        background: #f2f2f2;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <script>
      var c = document.getElementById("canvas");
      var ctx = c.getContext("2d");

      var particleCount = 20; // 设置粒子数量
      var particles = [];

      // 绘制三角形
      ctx.beginPath();
      ctx.moveTo(50, 50);
      ctx.lineTo(100, 100);
      ctx.lineTo(0, 100);
      ctx.fillStyle = "blue";
      ctx.fill();

      // 生成粒子
      for (var i = 0; i < particleCount; i++) {
        particles.push({
          x: getRandomInt(0, c.width),
          y: getRandomInt(0, c.height),
          speed: 0.5,
          angle: getRandomInt(0, 360),
          radius: getRandomInt(2, 4),
          color: getRandomColor()
        });
      }

      function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
      }

      function getRandomColor() {
        return (
          "rgb(" +
          getRandomInt(0, 255) +
          "," +
          getRandomInt(0, 255) +
          "," +
          getRandomInt(0, 255) +
          ")"
        );
      }

      function drawParticles() {
        for (var i = 0; i < particles.length; i++) {
          var p = particles[i];
          ctx.beginPath();
          ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2, true);
          ctx.closePath();
          ctx.fillStyle = p.color;
          ctx.fill();
        }
      }

      function updateParticles() {
        for (var i = 0; i < particles.length; i++) {
          var p = particles[i];
          var vx = Math.cos(p.angle) * p.speed;
          var vy = Math.sin(p.angle) * p.speed;
          p.x += vx;
          p.y += vy;
          if (
            p.x < 50 ||
            p.x > 100 ||
            p.y < 50 ||
            p.y > 100 - ((p.x - 50) * Math.sqrt(3)) / 2
          ) {
            p.x = getRandomInt(0, c.width);
            p.y = getRandomInt(0, c.height);
            p.angle = getRandomInt(0, 360);
          }
        }
      }

      function loop() {
        ctx.clearRect(0, 0, c.width, c.height);
        drawParticles();
        updateParticles();
        requestAnimationFrame(loop);
      }

      loop();
    </script>
  </body>
</html>

示例二

接下来是第二条示例说明，演示了如何通过更改粒子的速度、颜色等属性，来实现不同的效果。将颜色从随机变成红色，增加速度，同时增加粒子数量。

<!DOCTYPE html>
<html>
  <head>
    <title>Example 2</title>
    <style>
      #canvas {
        width: 100vw;
        height: 100vh;
        background: #f2f2f2;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <script>
      var c = document.getElementById("canvas");
      var ctx = c.getContext("2d");

      var particleCount = 50; // 设置粒子数量
      var particles = [];

      // 绘制三角形
      ctx.beginPath();
      ctx.moveTo(50, 50);
      ctx.lineTo(100, 100);
      ctx.lineTo(0, 100);
      ctx.fillStyle = "red";
      ctx.fill();

      // 生成粒子
      for (var i = 0; i < particleCount; i++) {
        particles.push({
          x: getRandomInt(0, c.width),
          y: getRandomInt(0, c.height),
          speed: 2, // 增加粒子速度
          angle: getRandomInt(0, 360),
          radius: getRandomInt(2, 4),
          color: "red" // 将颜色定为红色
        });
      }

      function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
      }

      function drawParticles() {
        for (var i = 0; i < particles.length; i++) {
          var p = particles[i];
          ctx.beginPath();
          ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2, true);
          ctx.closePath();
          ctx.fillStyle = p.color;
          ctx.fill();
        }
      }

      function updateParticles() {
        for (var i = 0; i < particles.length; i++) {
          var p = particles[i];
          var vx = Math.cos(p.angle) * p.speed;
          var vy = Math.sin(p.angle) * p.speed;
          p.x += vx;
          p.y += vy;
          if (
            p.x < 50 ||
            p.x > 100 ||
            p.y < 50 ||
            p.y > 100 - ((p.x - 50) * Math.sqrt(3)) / 2
          ) {
            p.x = getRandomInt(0, c.width);
            p.y = getRandomInt(0, c.height);
            p.angle = getRandomInt(0, 360);
          }
        }
      }

      function loop() {
        ctx.clearRect(0, 0, c.width, c.height);
        drawParticles();
        updateParticles();
        requestAnimationFrame(loop);
      }

      loop();
    </script>
  </body>
</html>

以上两个示例演示了如何通过JavaScript来实现三角形粒子运动效果，可以根据需求自行调整粒子数量、运动速度、颜色等属性，来实现不同的效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js实现三角形粒子运动 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • js中实例与对象的区别讲解

    JS中，实例和对象都是面向对象编程的概念，但它们有着不同的含义。 实例与对象的区别 对象 对象是JS中非常重要且常见的数据类型。它可以是一个简单的数据类型，也可以是一个数组，函数等组合类型，甚至可以是由其他对象组成的复杂类型。每个对象都有一个自己的属性和方法，这些方法和属性可以被对象访问和修改。以下是一个简单对象的例子： let person = { nam…

    JavaScript 2023年5月27日
    00

  • Javascript之Math对象详解

    Javascript之Math对象详解 Math对象简介 Math对象是JavaScript中的一个内置对象，该对象没有构造函数，直接通过Math关键字来使用。它提供了许多数学函数和常数，可以方便地进行数学计算。 Math对象常用属性 Math.PI Math.PI是一个数学常数，它表示圆周长与直径之比，约等于3.141592653589793。我们可以直接…

    JavaScript 2023年5月27日
    00

  • 原生js实现节日时间倒计时功能

    对于网站开发者来说，实现节日倒计时功能是一个很有趣的项目。下面是实现节日时间倒计时功能的完整攻略： 1. HTML 结构 <p id="countdown"></p> 在 HTML 中建立一个计时器的 DOM 元素，在本例中是一个段落元素，被赋予 ID 为 countdown。 2. JavaScript 代码 创…

    JavaScript 2023年5月27日
    00

  • 使用requestAnimationFrame实现js动画性能好

    使用requestAnimationFrame实现js动画的优点是可以避免过多使用setTimeout或setInterval造成的页面卡顿、CPU过度占用等问题，从而保证动画的流畅度和性能。以下是具体操作步骤： 准备工作 首先需要在代码中声明一个全局变量 requestId 用于记录动画的请求ID。然后编写动画函数，此函数需要接收一个时间参数。 let r…

    JavaScript 2023年6月10日
    00

  • 代码生成器 document.write()

    代码生成器 document.write() 是一种 JavaScript 方法，可以在 HTML 文档中动态生成内容。在本文中，将详细讲解使用 document.write() 方法来生成 HTML 代码的完整攻略。 使用 document.write() 语法 document.write(HTMLcode) 参数 HTMLcode : 必需。要写入 H…

    JavaScript 2023年5月28日
    00

  • WebWorker 封装 JavaScript 沙箱详情

    WebWorker是一种浏览器提供的JavaScript语言的多线程解决方案，它允许在后台运行长时间运算脚本而不会干扰用户界面，并且可以通过WebWorker进行线程之间的通信。 但是，在实际使用过程中，由于WebWorker并没有提供JS沙箱环境，如果在WebWorker中运行的JS脚本存在恶意代码，将会对用户数据造成威胁。 因此，我们需要在WebWork…

    JavaScript 2023年5月28日
    00

  • Javascript 面向对象 继承

    JavaScript 是一门面向对象的编程语言，因此在 JavaScript 中实现继承的方式和其他面向对象编程语言如 Java 和 Python 有些区别。下面是一个完整的 JavaScript 面向对象继承攻略，示例说明了两种常用的继承方式。 1. 构造函数继承 构造函数继承是通过在子类构造函数中调用父类构造函数来继承父类属性和方法，这种继承方式存在一个…

    JavaScript 2023年5月27日
    00

  • 浅谈React Router关于history的那些事

    浅谈React Router关于history的那些事 React Router是React中最流行的路由库之一，用于在React应用程序中管理不同URL之间的转换。其中一个重要的概念是history，它是实际实现路由的技术基础。本文将重点讲解React Router中关于history的那些事。 history是什么 首先，我们需要了解什么是history…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部