фон треугольник вместо круга JS

Question

Я пытаюсь реализовать следующий эффект на моем сайте: AnimatedHeaderBackgrounds

Но вместо кругов я хочу треугольников, которые идут вверх. Я искал Stack Overflow и попробовал пару вещей, но это не совсем сработало.

(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; 
 
    } 
 

 
})();

Ive проверили этот StackOverflow: 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>