背景三角形而不是圓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>