- <!DOCTYPE html>
- <html>
-
- <head>
- <meta charset="UTF-8">
- <title>
- daowuya-canvas粒子连线
- </title>
- <meta name="keywords" content="canvas粒子连线,daowuya 粒子" />
- <meta name="description" content="canvas粒子连线,daowuya 粒子" />
- <style type="text/CSS">
- * { margin: 0;padding: 0; } html,body { width: 100%; height: 100%; overflow:
- hidden; } canvas { background: #000; }
- </style>
- </head>
-
- <body>
- <canvas id="canvas">
- </canvas>
- <script type="text/javascript">
- var canvas = document.getElementById('canvas'),
- c = canvas.getContext('2d'),
- oW,
- oH,
- // 粒子的个数
- count,
- // 速度
- speed = 3,
- // 粒子间的最大距离
- range = 60,
- // 定义透明度
- opacity,
- // 装粒子的数组
- dotteds = [];
-
- // 获取与设置宽高
- function getAndSet() {
- // 获取
- oW = window.innerWidth || document.body.clientWidth;
- oH = window.innerHeight || document.body.clientHeight;
- // 设置
- canvas.width = oW;
- canvas.height = oH;
-
- // 粒子的个数
- count = Math.floor(oW * oH / 4000);
- // console.log(count);
- }
- getAndSet();
- // 窗口大小改变
- window.onresize = function() {
- getAndSet();
- }
-
- // 生成粒子
- for (var i = 0; i < count; i++) {
- dotteds.push(new Dotted(i * Math.floor(Math.random() * 361)))
- }
-
- // 创建单个例子对象
- function Dotted(hue) {
- // 单个例子的起始坐标
- this.x = Math.random() * oW;
- this.y = Math.random() * oH;
- this.r = Math.random() * 3 + 1;
-
- // 单个粒子的速度
- this.vx = (Math.random() - 0.5) * speed || 1;
- this.vy = (Math.random() - 0.5) * speed || 1;
-
- // 颜色值
- this.hue = hue;
- }
- // 粒子速度更新
- Dotted.prototype.update = function() {
- this.x += this.vx;
- this.y += this.vy;
-
- if (this.x < 0 || this.x > oW) {
- this.vx *= -1;
- this.r = Math.random() * 3 + 1;
- this.hue = Math.floor(Math.random() * 361);
- }
- if (this.y < 0 || this.y > oH) {
- this.vy *= -1;
- this.r = Math.random() * 3 + 1;
- this.hue = Math.floor(Math.random() * 361);
- }
- }
- // 粒子距离的判断
- function check(d1, d2, range) {
- var x = d1.x - d2.x,
- y = d1.y - d2.y;
- return x * x + y * y <= range * range;
- }
-
- function move() {
- window.requestAnimationFrame(move);
-
- // c.clearRect(0,0,oW,oH);
- c.fillStyle = 'rgba(0,0,0,.2)';
- c.fillRect(0, 0, oW, oH);
-
- for (var i = 0; i < dotteds.length; i++) {
- var d1 = dotteds[i];
- d1.update();
-
- for (var j = i + 1; j < dotteds.length; j++) {
- var d2 = dotteds[j];
-
- if (check(d1, d2, range)) {
- opacity = 1 - Math.sqrt(Math.pow(d1.x - d2.x, 2) + Math.pow(d1.y - d2.y, 2)) / range;
- c.strokeStyle = 'hsla(hue,80%,50%,alp)'.replace('hue', (d1.hue + d2.hue) % 360).replace('alp', opacity) c.beginPath();
- c.moveTo(d1.x, d1.y);
- c.lineTo(d2.x, d2.y);
- c.stroke();
- }
- }
-
- c.beginPath();
- c.arc(d1.x, d1.y, d1.r, 0, Math.PI * 2, true);
- c.fillStyle = 'hsl(' + d1.hue + ',50% , 50%)';
- c.fill();
- }
- }
- move();
- </script>
- </body>
-
- </html>