Canvas实现动态粒子连线效果(附代码)


本文摘自PHP中文网,作者青灯夜游,侵删。

本篇文章给大家通过示例来介绍一下JS+Canvas制作动画,实现动态粒子连线效果的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

JS+Canvas制作动画,实现动态粒子连线效果

效果图如下

1.gif

思路如下:

  • 绘制随机区域的粒子,记录每个粒子x轴、y轴坐标以及x轴与y轴每次移动的距离

  • 通过定时函数使得粒子进行移动,移动后判断是否超过界限,超过则将该粒子删除并生成一个新的粒子

  • 判断所有粒子之间的距离,对给定距离的粒子进行连线。

代码如下:

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

<!DOCTYPE html>

<html>

 <head>

 <meta charset="UTF-8">

 <title>Canvas动态粒子连线</title>

 </head>

   

 <body>

 <canvas id="myCanvas" style="border: 1px solid #ddd; display: block;margin: 20px auto;"></canvas>

 <script>

 var myCanvas = document.getElementById("myCanvas");

 myCanvas.width = "800";

 myCanvas.height = "800";

 var cxt = myCanvas.getContext("2d");

 cxt.fillStyle="#ddd";

 var points =new Array();

 //绘制60个粒子

 for(var i=0;i<60;i++)

 {

 drawlizi();

 }

 setInterval(movelizi,100);

   

 //绘制静态粒子

 function drawlizi(){

 var x = generate_random(3,797);

 var y = generate_random(3,797);

 var speedx = generate_random(-4,4);

 var speedy = generate_random(-4,4);

 //防止出现不移动的粒子

 while(speedx==0&&speedy==0)

 {

 speedx = generate_random(-4,4);

 speedy = generate_random(-4,4);

 }

 var point={

 x_index:x,

 y_index:y,

 x_speed:speedx,

 y_speed:speedy

 };

 points.push(point);

 cxt.beginPath();

 cxt.arc(x,y,3,0,360);

 cxt.closePath();

 cxt.fill();

 }

   

 //粒子移动

 function movelizi(){

 cxt.clearRect(0, 0,myCanvas.width,myCanvas.height);

 for(var i=0;i<points.length;i++)

 {

 points[i].x_index = points[i].x_index+points[i].x_speed;

 points[i].y_index = points[i].y_index+points[i].y_speed;

 cxt.beginPath();

 cxt.arc(points[i].x_index,points[i].y_index,3,0,360);

 cxt.closePath();

 cxt.fill();

 //判断超过界限删除并再生

 if((points[i].x_index<3||points[i].y_index<3)||(points[i].x_index>797||points[i].y_index<3)||(points[i].x_index<3||points[i].y_index>797)||(points[i].x_index>797||points[i].y_index>797)){

 points.splice(i,1);

 drawlizi();

 }

 }

 //相近的粒子进行连线

 for (var i=0;i<points.length;i++) {

 for (var j=0;j<points.length;j++) {

 if(i!=j)

 {

 var one_x = points[i].x_index;

 var one_y = points[i].y_index;

 var two_x = points[j].x_index;

 var two_y = points[j].y_index;

 // 根据两点间的距离公式,小于界限值便进行连线

 var jl = Math.sqrt(Math.pow(one_x-two_x,2)+Math.pow(one_y-two_y,2));

 if(jl<100)

 {

 cxt.strokeStyle="#ddd";

 cxt.moveTo(one_x,one_y);

 cxt.lineTo(two_x,two_y);

 cxt.stroke();

 }

 }

 }

 }

 }

 //生成两个数之间的随机数

 function generate_random(min,max){

 return Math.floor(Math.random()*(max-min)+min);

 }

 </script>

 </body>

   

</html>

更多炫酷的页面特效,可访问:js代码特效 栏目!!

以上就是Canvas实现动态粒子连线效果(附代码)的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

html怎么加入js

h5与c3的新交互特性有哪些

html5移动端-viewport的详解

html中序列化标签的简单介绍(代码实例)

javascript如何定义私有方法

javascript 构造函数和 "new" 操作符详解

学习使用gpu.js改善javascript性能

带你认识html57个混合式移动开发框架

javascript中object方法有哪些

javascript专题之六:类型检测

更多相关阅读请进入《canvas》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...