~~! 最近事挺多的, 笔记更新的慢, 之前买了 ""吃鸡", 现在也没时间玩, 所以我决定把号送出去, 还有一年海豚加速器, 有需要的在下方评论, 找个有缘人送了.
html 代码
- <!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>
canvas
评论
15
喜欢
21
赞
11
评论 ( 15 )
走你
最新评论
来源: http://www.qdfuns.com/article/34656/cf3acb86b5dfc29d49dbadec0268cba9.html