三角形粒子运动

最新推荐文章于 2024-07-24 16:55:14 发布
最新推荐文章于 2024-07-24 16:55:14 发布
阅读量204 收藏
点赞数
分类专栏： html js 文章标签： html js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/barbed/article/details/108691063
版权
js 同时被 2 个专栏收录
10 篇文章 0 订阅
订阅专栏
html
5 篇文章 0 订阅
订阅专栏

效果(这里只是截了一个静态图，实际上里面的粒子是运动状态的)：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>粒子</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            overflow: hidden;
        }
    </style>
    <script>
        //随机数获取 3 10  *7+3
        function random(min, max) {
            return Math.random() * (max - min) + min;

        }
        //亮色系
        // colors = ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9', '#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'];
        //暗色系
        colors = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3']
        //获取窗口宽高
        var width = window.innerWidth;
        var height = window.innerHeight;
        function Bubble() {
            this.r = random(5, 100);
            this.x1 = random(this.r, this.r * 2);
            this.y1 = random(this.r, this.r * 2);
            this.x2 = random(this.r, this.r * 2);
            this.y2 = random(this.r, this.r * 2);
            this.x3 = random(this.r, this.r * 2);
            this.y3 = random(this.r, this.r * 2);
            //随机获取colors数组里的颜色
            this.color = colors[Math.floor(random(0, colors.length))];
            //偏移步长
            this.xr = random(-5, 5);
            this.yr = random(-5, 5);
        }
        Bubble.prototype = {
            //绘制
            draw: function (context) {
                //开始路径
                context.beginPath();
                context.moveTo(this.x1, this.y1);
                context.lineTo(this.x2, this.y2);
                context.lineTo(this.x3, this.y3);
                context.lineTo(this.x1, this.y1);
                context.fillStyle = this.color;
                context.fill();
            },
            //移动
            move: function (context) {
                this.x1 += this.xr;
                this.y1 += this.yr;
                this.x2 += this.xr;
                this.y2 += this.yr;
                this.x3 += this.xr;
                this.y3 += this.yr;
                //边缘检测
                (this.x1 > width || this.x1 < 0) ? this.xr = -this.xr : null;
                (this.y1 > height || this.y1 < 0) ? this.yr = -this.yr : null;
                (this.x2 > width || this.x2 < 0) ? this.xr = -this.xr : null;
                (this.y2 > height || this.y2 < 0) ? this.yr = -this.yr : null;
                (this.x3 > width || this.x3 < 0) ? this.xr = -this.xr : null;
                (this.y3 > height || this.y3 < 0) ? this.yr = -this.yr : null;
                this.draw(context);
            }
        }

        window.onload = function () {
            //获取画布dom
            var canvas = document.querySelector('canvas');
            //设置canvas的宽高
            canvas.width = width;
            canvas.height = height;
            //获取画布上下文对象
            var context = canvas.getContext('2d');
            //数组存储bubble
            var arr = [];
            //生成粒子
            var total = 100;
            //生成例子
            for (var i = 0; i < total; i++) {
                var bubble = new Bubble();
                bubble.draw(context);
                arr.push(bubble);
            }
            var id = setInterval(function () {
                //清除
                context.clearRect(0, 0, width, height);
                //开始移动
                for (var i = 0; i < arr.length; i++) {
                    arr[i].move(context);
                }
            }, 1000 / 60)
            //点击次数
            var count = 0;
            canvas.onclick = function () {
                if (count++ % 2 == 0) {
                    //停止
                    clearInterval(id);
                } else {
                    //运行
                    id = setInterval(function () {
                        //清除
                        context.clearRect(0, 0, width, height);
                        //开始移动
                        for (var i = 0; i < arr.length; i++) {
                            arr[i].move(context);
                        }
                    }, 1000 / 60)
                }
            }
        }
    </script>
</head>

<body>
    <canvas title="点击停止，再次点击活动"></canvas>
</body>

</html>
barbed
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现三角形粒子运动
10-14
主要为大家详细介绍了js实现三角形粒子运动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
三角运动 html,js实现三角形粒子运动
weixin_34334554的博客
06-05 165
本文实例为大家分享了js实现三角形粒子运动的具体代码，供大家参考，具体内容如下效果(这里只是截了一个静态图，实际上里面的粒子是运动状态的)：粒子* {margin: 0;padding: 0;}body {overflow: hidden;}//随机数获取 3 10 *7+3function random(min, max) {return Math.random() * (max - min) ...
小球圆周运动
qq_43776742的博客
12-15 980
小球圆周运动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq...
粒子系统概述
a1341188的博客
03-02 447
开始以为粒子系统也和Fog一样有现成的函数，只要改变一下状态，设置一下就可以达到想要的效果，在看过NEHE的粒子系统和网络上的一些介绍后才知道，粒子系统是一步一步通过很基本的操作构造的。 粒子系统主要用来解决由大量按一定规则运动（变化）的微小物质组成的大物质在计算机上的生成与显示的问题。 每个粒子需要一些属性来和其他粒子区别。通常在一个系统中的所有粒子有一个相同的属性集。 ...
HTML5粒子组合三角形特效特效代码
03-20
在这个特效中，每个粒子都代表一个微小的图形元素，如点或简单的形状，它们根据预设的规则运动和变化，组合成更复杂的图形——在这个例子中，是三角形。 3. **三角形生成**：在3D图形中，三角形是最基本的多边形，...
粒子系统编辑器
06-21
3.3 粒子更新：通过d3d的计算着色器（Compute Shader）处理粒子的运动和状态更新，如根据重力、风力等外部因素改变粒子的速度和方向。 3.4 性能优化：利用硬件加速、减少不必要的计算、分批次渲染等手段，确保粒子...
HTML5 SVG多边形粒子时钟动画特效
06-24
可以使用CSS动画来控制粒子的运动，比如让它们以某种规律移动，以模拟时钟指针的旋转。此外，JavaScript可以用来实时更新粒子的位置，以反映当前时间。例如，小时、分钟和秒钟的指针可以通过JavaScript获取系统时间...
dayjs Timezone 设置默认时区
barbed的博客
04-02 8222
利用dayjs实现设置默认时区
JS 实现10的阶乘 (for、while、do-whild、递归)
barbed的博客
09-13 7091
10的阶乘：10! = 10 * 9! = 10 * 9 * 8! = ┄ = 10 * 9 * 8 * 7 * 6 * 5 * 4 *3 * 2 * 1 1、for 循环实现10！ function jc1(num) { var str = '10!='; var sum = 1; for (var i = num; i > 0; i--) { sum = sum * i; if (i == 1) { str = str
闭包&解决闭包问题
barbed的博客
09-13 468
1、函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起构成闭包（closure)。 2、函数与函数所依赖的上下文环境组成闭包问题。 3、闭包指的是：能够访问另一个函数作用域的变量的函数。清晰的讲：闭包就是一个函数，这个函数能够访问其他函数的作用域中的变量。 var arr = []; for (var i = 0; i < 10; i++) { arr[i] = function () { console.log(i); }; }
原生ajax使用
barbed的博客
09-20 248
ajax是异步的JavaScript和XML。用来进行异步请求。浏览器可以用来向服务器发送一个ajax请求，进行页面的局部刷新。 get方式请求 //创建对象 var httpRequest = new XMLHttpRequest(); //建立连接 httpRequest.open('get', URL+'?' + qs.stringify(params)); //认证 //httpRequest.setRequestHeader("Authorization",sessionStorage.getIt
js 更改函数内部this指向的几种方式
barbed的博客
09-13 227
1、函数名.call(执行环境对象,实参列表); 2、函数名.apply(执行环境对象,实参列表数组); 3、函数名.bind(执行环境对象)(实参列表); 4、函数名.bind(执行环境对象，实参列表)(); var obj = { name: 'lili', sayThis: function (a, b) { console.log(this, a, b); } } obj.sayThis(1, 2); obj.sayThis.call({}, 1, 2); o
我理解的js中的原型
barbed的博客
09-13 112
每一个构造函数都有一个原型对象，通过构造函数的prototype可以访问原型对象。 当调用构造函数创建一个新实例后，该实例的内部将包含一个指针指向构造函数的原型对象。 实例所能调用的属性和方法可以是实例本身，也可以是实例的原型对象的。 ...
String方法
barbed的博客
09-13 90
String的11个方法：charAt(), charCodeAt(), indexOf(), lastIndexOf(), concat(), slice(), substring(), substr(), trim(), toLowerCase(), toUpperCase() 1、charAt() 返回给定位置的字符 2、charCodeAt() 返回给定位置的字符的字符编码 3、indexOf() 从前往后查找指定字符所在位置 4、lastIndexOf() 从后往前查找字符串所在位置，可以有第二个
js 深浅拷贝
barbed的博客
09-20 82
深拷贝就是复制内部内容 浅拷贝就是复制内存地址 var obj = {}; //浅拷贝 -->引用传递(浅拷贝就是赋值，将钥匙复制一份) var o = obj; //深拷贝 -->内部内容复制一份（将房子复制一份） //方法一 var str = JSON.stringify(obj); var obj3 = JSON.parse(str); //方法二 var obj4 = {}; //遍历obj对象，将obj对象的内容复制到obj4中。 for (var key in obj) {
数组方法
barbed的博客
09-13 71
数组方法：pop(),push(),shift(),unshift(),reverse(),sort(),concat(), slice(), splice(),indexOf(),lastIndexOf(),every(),some(), filter(),map(),forEach(); 1、栈 pop()、push() var arr = [4, 5, 6, 7, 8, 9, 5, 7, 4, '5']; // push() 可接受任意类型的参数，将它们逐个添加到数组的末尾，并返回数组的长度 var
【HTML — 构建网络】HTML 中的元数据
最新发布
07-24 911
这在很多方面都很有用。如果设置了 HTML 文档的语言（例如，允许其在特定语言的结果中正确显示），则搜索引擎将更有效地索引您的 HTML 文档，并且它对使用屏幕阅读器的视觉障碍者很有用（例如，“六”一词在法语和英语中都存在，但发音不同。的链接（如果您选择使用 CSS 设置HTML内容的样式）、指向自定义图标的链接以及其他元数据（有关HTML的数据，例如作者和描述文档的重要关键字）。指定包含与您的页面内容相关的关键字的描述很有用，因为它有可能使您的页面在搜索引擎执行的相关搜索中显示得更高（此类活动称为。
mcgs小球沿三角形运动
12-22
mcgs小球沿着三角形运动，形成了一个优美的运动轨迹。当小球在三角形内运动时，它会不断地改变方向，同时速度也会有所变化。这种运动方式给人一种动感和美感。 三角形的每个边上都是小球的运动轨迹，这意味着小球将...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值