HTML5梦幻变色波浪线条特效代码

创客云


canvas全屏变色波浪线条动画特效基于html5canvas+js制作的全屏变色波浪线条动画特效,线条发光背景颜色变换效果。由线条组成,在运动的同时还有颜色变幻效果。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)浏览器预览本源码。

  1. <script src="js/gsap.min.js"></script>
  2. <canvas id="c"></canvas>
  3. <script>
  4. // Customize these...
  5. var n = 800, //points in the line
  6.     speed = 30,
  7.     amp = 400, // base amplitude
  8.     rand = 0, //modifies amp
  9.     cycles = 7,
  10.     pan = window.innerWidth; //adjust panning to make a smoother lateral movement
  11. // ...not these
  12. var c = document.getElementById("c"),
  13.     ctx = c.getContext("2d"),
  14.     cw = (c.width = window.innerWidth),
  15.     ch = (c.height = window.innerHeight),
  16.     particles = [],
  17.     Particle = function(index) {
  18.       this.x = this.y = this.index = this.alpha = index;
  19.       this.dur = 100/speed;
  20.       this.draw = function(){ ctx.globalAlpha = this.alpha; ctx.lineTo(this.x, this.y); }
  21.     };
  22. function setParticle(p) {
  23.   gsap.timeline({defaults:{duration:p.dur}, repeat:-1, yoyo:true })
  24.       .fromTo(p, {
  25.         x:(pan+cw)/n*(p.index+1),
  26.         y:ch/2 + (gsap.utils.random(amp,amp+rand)*Math.cos(p.index/n*cycles)),
  27.         alpha:0.9,
  28.       },{
  29.         y:ch/2 - (gsap.utils.random(amp,amp+rand)*Math.cos(p.index/n*cycles)),
  30.         yoyo:true,
  31.         repeat:1,
  32.         ease:Sine.easeInOut
  33.       })
  34.       .to(p, {
  35.         duration:p.dur*2,
  36.         x:'-='+(pan-n),
  37.         ease:Sine.easeInOut
  38.       }, 0)
  39. }
  40. // First run & handle resize
  41. for (var i=0; i<n; i++) particles.push(new Particle(i));
  42. window.addEventListener('resize', init);
  43. init();
  44. function init() {
  45.   cw = c.width = window.innerWidth;
  46.   ch = c.height = window.innerHeight;
  47.   for (var i=0; i<n; i++) {
  48.     TweenMax.killTweensOf(particles[i]);
  49.     setParticle(particles[i]);
  50.   }
  51. }
  52. colorBase = 240;
  53. gsap.ticker.add(function(){
  54.   colorBase+=0.2;
  55.   ctx.globalAlpha = 0.05;
  56.   ctx.globalCompositeOperation = 'source-over';  
  57.   ctx.fillStyle = 'hsl('+colorBase+', 100%,50% )';//"#a00070";
  58.   ctx.fillRect(0, 0, cw, ch);
  59.   ctx.globalCompositeOperation = 'lighter';
  60.   ctx.strokeStyle = "#aaa";
  61.   ctx.beginPath();
  62.   ctx.moveTo(-n,ch/2);
  63.   for (var i=0; i<n; i++) particles[i].draw();
  64.   ctx.stroke();
  65. });
  66. </script>
演示地址 免费下载
本文由 CityMall 整理发布如需转载,请注明出处:https://www.22vd.com/60114.html
云模板

发表评论