个人中心
gpt4 book ai didi

js实现三角形粒子运动

转载 作者：qq735679552 更新时间：2022-09-29 22:32:09 33 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章js实现三角形粒子运动由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

本文实例为大家分享了js实现三角形粒子运动的具体代码，供大家参考，具体内容如下 。

效果(这里只是截了一个静态图，实际上里面的粒子是运动状态的):

js实现三角形粒子运动

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!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 >

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我.

原文链接：https://blog.csdn.net/barbed/article/details/108691063 。

最后此篇关于js实现三角形粒子运动的文章就讲到这里了,如果你想了解更多关于js实现三角形粒子运动的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

33 4 0
文章推荐： 使用Python在Windows下获取USB PID&VID的方法
文章推荐： 从基础学java--数组
文章推荐： 在windows下使用python进行串口通讯的方法
文章推荐： python攻防-破解附近局域网WIFI密码实现上网自由
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com