背景三角形而不是圆JS

Question

我想实现我的网站上产生以下影响：AnimatedHeaderBackgrounds

但不是圈我想要去向上的三角形。我已经搜索了堆栈溢出，并尝试了几件事情，但它并没有工作。

(function() { 
 

 
    var width, height, largeHeader, canvas, ctx, triangles, target, animateHeader = true; 
 
    var colors = ['72,35,68', '43,81,102', '66,152,103', '250,178,67', '224,33,48']; 
 

 
    // Main 
 
    initHeader(); 
 
    addListeners(); 
 

 
    function initHeader() { 
 
     width = window.innerWidth; 
 
     height = window.innerHeight; 
 
     target = {x: 0, y: height}; 
 

 
     largeHeader = document.getElementById('large-header'); 
 
     largeHeader.style.height = height+'px'; 
 

 
     canvas = document.getElementById('demo-canvas'); 
 
     canvas.width = width; 
 
     canvas.height = height; 
 
     ctx = canvas.getContext('2d'); 
 

 
     // create particles 
 
     triangles = []; 
 
     for(var x = 0; x < width*0.5; x++) { 
 
      var c = new Triangle(); 
 
      triangles.push(c); 
 
     } 
 
     animate(); 
 
    } 
 

 
    // Event handling 
 
    function addListeners() { 
 
     window.addEventListener('scroll', scrollCheck); 
 
     window.addEventListener('resize', resize); 
 
    } 
 

 
    function scrollCheck() { 
 
     if(document.body.scrollTop > height) animateHeader = false; 
 
     else animateHeader = true; 
 
    } 
 

 
    function resize() { 
 
     width = window.innerWidth; 
 
     height = window.innerHeight; 
 
     largeHeader.style.height = height+'px'; 
 
     canvas.width = width; 
 
     canvas.height = height; 
 
    } 
 

 
    function animate() { 
 
     if(animateHeader) { 
 
      ctx.clearRect(0,0,width,height); 
 
      for(var i in triangles) { 
 
       triangles[i].draw(); 
 
      } 
 
     } 
 
     requestAnimationFrame(animate); 
 
    } 
 

 
    // Canvas manipulation 
 
    function Triangle() { 
 
     var _this = this; 
 

 
     // constructor 
 
     (function() { 
 
      _this.coords = [{},{},{}]; 
 
      _this.pos = {}; 
 
      init(); 
 
     })(); 
 

 
     function init() { 
 
      _this.pos.x = Math.random()*width; 
 
      _this.pos.y = height+Math.random()*100; 
 
      _this.alpha = 0.1+Math.random()*0.3; 
 
      _this.scale = 0.1+Math.random()*0.3; 
 
      _this.velocity = Math.random(); 
 
     } 
 

 
     this.draw = function() { 
 
      if(_this.alpha >= 0.005){ 
 
       _this.alpha -= 0.005; 
 
      } else { 
 
       _this.alpha = 0; 
 
      } 
 
      ctx.beginPath(); 
 
      ctx.moveTo(_this.coords[0].x+_this.pos.x, _this.coords[0].y+_this.pos.y); 
 
      ctx.lineTo(_this.coords[1].x+_this.pos.x, _this.coords[1].y+_this.pos.y); 
 
      ctx.lineTo(_this.coords[2].x+_this.pos.x, _this.coords[2].y+_this.pos.y); 
 
      ctx.closePath(); 
 
      ctx.fillStyle = 'rgba('+_this.color+','+ _this.alpha+')'; 
 
      ctx.fill(); 
 
     }; 
 

 
     this.init = init; 
 
    } 
 

 
})();

伊夫检查这个计算器：Create equilateral triangle in the middle of canvas?

这里完整片段：

(function() { 
 

 
    var width, height, largeHeader, canvas, ctx, circles, target, animateHeader = true; 
 

 
    // Main 
 
    initHeader(); 
 
    addListeners(); 
 

 
    function initHeader() { 
 
     width = window.innerWidth; 
 
     height = window.innerHeight; 
 
     target = {x: 0, y: height}; 
 

 
     largeHeader = document.getElementById('large-header'); 
 
     largeHeader.style.height = height+'px'; 
 

 
     canvas = document.getElementById('demo-canvas'); 
 
     canvas.width = width; 
 
     canvas.height = height; 
 
     ctx = canvas.getContext('2d'); 
 

 
     // create particles 
 
     circles = []; 
 
     for(var x = 0; x < width*0.5; x++) { 
 
      var c = new Circle(); 
 
      circles.push(c); 
 
     } 
 
     animate(); 
 
    } 
 

 
    // Event handling 
 
    function addListeners() { 
 
     window.addEventListener('scroll', scrollCheck); 
 
     window.addEventListener('resize', resize); 
 
    } 
 

 
    function scrollCheck() { 
 
     if(document.body.scrollTop > height) animateHeader = false; 
 
     else animateHeader = true; 
 
    } 
 

 
    function resize() { 
 
     width = window.innerWidth; 
 
     height = window.innerHeight; 
 
     largeHeader.style.height = height+'px'; 
 
     canvas.width = width; 
 
     canvas.height = height; 
 
    } 
 

 
    function animate() { 
 
     if(animateHeader) { 
 
      ctx.clearRect(0,0,width,height); 
 
      for(var i in circles) { 
 
       circles[i].draw(); 
 
      } 
 
     } 
 
     requestAnimationFrame(animate); 
 
    } 
 

 
    // Canvas manipulation 
 
    function Circle() { 
 
     var _this = this; 
 

 
     // constructor 
 
     (function() { 
 
      _this.pos = {}; 
 
      init(); 
 
      console.log(_this); 
 
     })(); 
 

 
     function init() { 
 
      _this.pos.x = Math.random()*width; 
 
      _this.pos.y = height+Math.random()*100; 
 
      _this.alpha = 0.1+Math.random()*0.3; 
 
      _this.scale = 0.1+Math.random()*0.3; 
 
      _this.velocity = Math.random(); 
 
     } 
 

 
     this.draw = function() { 
 
      if(_this.alpha <= 0) { 
 
       init(); 
 
      } 
 
      _this.pos.y -= _this.velocity; 
 
      _this.alpha -= 0.0005; 
 
      ctx.beginPath(); 
 
      ctx.arc(_this.pos.x, _this.pos.y, _this.scale*10, 0, 2 * Math.PI, false); 
 
      ctx.fillStyle = 'rgba(255,255,255,'+ _this.alpha+')'; 
 
      ctx.fill(); 
 
     }; 
 
    } 
 

 
})();

如果你知道解决方案。在此先感谢:)

Answer 1

SOLUTION

(function() { 
 

 
    var width, height, largeHeader, canvas, ctx, circles, target, animateHeader = true; 
 

 
    // Main 
 
    initHeader(); 
 
    addListeners(); 
 

 
    function initHeader() { 
 
    width = window.innerWidth; 
 
    height = window.innerHeight; 
 
    target = {x: 0, y: height}; 
 

 
    largeHeader = document.getElementById('large-header'); 
 
    largeHeader.style.height = height+'px'; 
 

 
    canvas = document.getElementById('demo-canvas'); 
 
    canvas.width = width; 
 
    canvas.height = height; 
 
    ctx = canvas.getContext('2d'); 
 

 
    // create particles 
 
    circles = []; 
 
    for(var x = 0; x < 100; x++) { 
 
     var c = new Circle(); 
 
     circles.push(c); 
 
    } 
 
    animate(); 
 
    } 
 

 
    // Event handling 
 
    function addListeners() { 
 
    window.addEventListener('scroll', scrollCheck); 
 
    window.addEventListener('resize', resize); 
 
    } 
 

 
    function scrollCheck() { 
 
    animateHeader = document.body.scrollTop < height; 
 
    } 
 

 
    function resize() { 
 
    width = window.innerWidth; 
 
    height = window.innerHeight; 
 
    largeHeader.style.height = height+'px'; 
 
    canvas.width = width; 
 
    canvas.height = height; 
 
    } 
 

 
    function animate() { 
 
    if(animateHeader) { 
 
     ctx.clearRect(0,0,width,height); 
 
     for(var i in circles) { 
 
     circles[i].draw(); 
 
     } 
 
    } 
 
    requestAnimationFrame(animate); 
 
    } 
 

 
    // Canvas manipulation 
 
    function Circle() { 
 
    var _this = this; 
 

 
    // constructor 
 
    (function() { 
 
     _this.pos = {}; 
 
     init(); 
 
     //console.log(_this); 
 
    })(); 
 

 
    function init() { 
 
     _this.pos.x = Math.random()*width; 
 
     _this.pos.y = height+Math.random()*100; 
 
     _this.alpha = 0.1+Math.random()*0.3; 
 
     _this.height = 10+Math.random()*0.3; 
 
     _this.width = 10+Math.random()*0.3; 
 
     _this.velocity = Math.random(); 
 
    } 
 

 
    this.draw = function() { 
 
     if(_this.alpha <= 0) { 
 
     init(); 
 
     } 
 
     _this.pos.y -= _this.velocity; 
 
     _this.alpha -= 0.0005; 
 
     ctx.beginPath(); 
 
     ctx.moveTo(_this.pos.x, _this.pos.y); 
 
     ctx.lineTo(_this.pos.x - (_this.width/2) , _this.pos.y + _this.height); 
 
     ctx.lineTo(_this.pos.x + (_this.width/2) , _this.pos.y + _this.height); 
 
     ctx.fillStyle = 'rgba(255,255,255,'+ _this.alpha+')'; 
 
     ctx.fill(); 
 
    }; 
 
    } 
 

 
})();

body { 
 
    overflow-x: hidden; 
 
} 
 
#large-header, #demo-canvas { 
 
    background: #333; 
 
} 
 
#content { 
 
    position: absolute; 
 
    top: 100%; 
 
    padding: 10px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> 
 
    <meta charset="utf-8"> 
 
    <title>JS Bin</title> 
 
    </head> 
 
    <body> 
 
    <div id="large-header"> 
 
     <canvas id="demo-canvas"></canvas> 
 
    </div> 
 
    <div id="content"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> 
 
    </div> 
 
    </body> 
 
</html>