炫酷线条背景动画
使用H5的Canvas實現網頁的炫酷線條背景特效。
效果演示
代碼展示
html內容
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title></title><style> canvas{position:absolute;top:0;left:0;background-color:black; } </style></head> <body><canvas id=c></canvas><script src="js/style.js"></script><div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> </div> </body> </html>js內容
var w = c.width = window.innerWidth,h = c.height = window.innerHeight,ctx = c.getContext('2d'),count = (w*h/3000)|0,speed = 4,range = 80,lineAlpha = .05,particles = [],huePart = 360/count;for(var i = 0; i < count; ++i)particles.push(new Particle((huePart*i)|0));function Particle(hue){this.x = Math.random()*w;this.y = Math.random()*h;this.vx = (Math.random()-.5)*speed;this.vy = (Math.random()-.5)*speed;this.hue = hue; } Particle.prototype.update = function(){this.x += this.vx;this.y += this.vy;if(this.x < 0 || this.x > w) this.vx *= -1;if(this.y < 0 || this.y > h) this.vy *= -1; }function checkDist(a, b, dist){var x = a.x - b.x,y = a.y - b.y;return x*x + y*y <= dist*dist; }function anim(){window.requestAnimationFrame(anim);ctx.fillStyle = 'rgba(0, 0, 0, .05)';ctx.fillRect(0, 0, w, h);for(var i = 0; i < particles.length; ++i){var p1 = particles[i];p1.update();for(var j = i+1; j < particles.length; ++j){var p2 = particles[j];if(checkDist(p1, p2, range)){ctx.strokeStyle = 'hsla(hue, 80%, 50%, alp)'.replace('hue', ((p1.hue + p2.hue + 3)/2) % 360).replace('alp', lineAlpha);ctx.beginPath();ctx.moveTo(p1.x, p1.y);ctx.lineTo(p2.x, p2.y);ctx.stroke();}}} }anim();總結
- 上一篇： C语言转义字符的使用
- 下一篇： Jsoup设置一个元素的HTML内容