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日

相关文章

  • WebAssembly初尝试

    前言 之前老是听别人提到WebAssembly这个词，一直对其比较模糊，不能理解是个啥东西，后来自己实践了一下，发现其实就是一种提高代码性能的手段。 简介 WebAssembly 是一种运行在现代网络浏览器中的新型代码，并且提供新的性能特性和效果。它设计的目的不是为了手写代码而是为诸如 C、C++和 Rust 等低级源语言提供一个高效的编译目标。（解释来自M…

    JavaScript 2023年4月17日
    00

  • JS window.opener返回父页面的应用

    JS中的window对象是指当前窗口的全局对象，同时也是许多操作的入口。其中，window.opener属性是window对象的一个属性，可以返回创建当前窗口的父窗口对象。 对于网站开发者而言，了解并掌握window.opener的用法，可以帮助我们实现一些有趣的功能。接下来，我将详细讲解“JS window.opener返回父页面的应用”的完整攻略，包括概…

    JavaScript 2023年6月11日
    00

  • js实现弹窗效果

    实现弹窗效果是我们在Web开发中常常需要用到的功能之一，下面我将为您介绍如何使用JavaScript实现一个基本的弹窗效果。 一、HTML结构 首先需要在HTML中建立一个弹窗结构： <div class="popup-overlay"> <div class="popup"> <div …

    JavaScript 2023年6月11日
    00

  • ImageZoom 图片放大镜效果（多功能扩展篇）

    ImageZoom是一款非常实用的图片放大镜效果插件，通过该插件可以实现图片放大、缩小、滑动等操作，增强了用户的交互体验。本篇攻略将从多个方面对ImageZoom进行扩展并实例演示，具体如下： 安装 首先，我们需要在页面中引入ImageZoom的相关文件。可以通过cdnjs或unpkg等CDN包管理工具引入ImageZoom的css和js文件。 <he…

    JavaScript 2023年6月10日
    00

  • Javascript 遍历对象中的子对象

    Javascript 遍历对象中的子对象通常使用递归的方式实现，具体步骤如下： 1. 判断对象是否为字典 使用 typeof 运算符判断对象类型是否为 object，进一步判断该对象是否为字典（即 {} 类型），如果不是，则直接输出当前对象： function traverseObject(obj, indentation) { if (typeof obj…

    JavaScript 2023年5月27日
    00

  • 面向对象的Javascript之二(接口实现介绍)

    我的回答如下。 面向对象的Javascript之二(接口实现介绍)攻略 什么是接口 在面向对象的编程语言中，接口是用来规范类或对象的行为的一种约束方式，它定义了一个类或对象应该遵循的协议，包括输入和输出。接口在Javascript中并不是一种语言结构，但是我们可以通过编码方式实现同样的效果。 接口的作用 接口可以提供代码的可读性和可维护性，使代码更加模块化。…

    JavaScript 2023年5月27日
    00

  • JavaScript数组filter方法

    当在JavaScript中使用数组时，有时我们需要从数组中筛选出符合条件的数据。这时可以使用数组的filter()方法。本文将介绍如何使用filter()方法以及一些示例。 基本语法 filter()方法的基本语法如下： array.filter(function(currentValue[, index[, array]]) { // 定义规则 }); 其…

    JavaScript 2023年5月27日
    00

  • html5+javascript实现简单上传的注意细节

    当我们需要在网站中添加文件上传功能时，可以使用HTML5和JavaScript来实现。但是在实现过程中，需要注意一些细节才能确保上传功能的稳定性和安全性。以下是实现简单上传的注意细节攻略： HTML5中的文件上传 HTML5通过 input 标签的 type=”file” 属性提供了文件上传功能。以下是HTML5文件上传的注意事项： 1.设定合适的 acce…

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