자바 스크립트를 사용하여 색종이 효과를 만드는 방법

Question

부스러기 모양이 삼각형이어야하는 (현재는 직사각형) 색종이 효과 (첨부 된 스크린 샷)를 만들고 싶습니다. 나는 다음과 같은 자바 스크립트 코드를 사용하여 효과를 얻고있다. 그러나 나는 웹 페이지가 열렸을 때 flakes가 위에서 아래로 떨어지기를 원합니다. 지금 우리가 페이지를 열면 그 페이지는 부스러기에 넘쳐납니다. 나는 화면을 비우고 조각을 천천히 내릴 수있는 방법을 찾고있었습니다. 사람이 효과를 분류하는 저를 도와주세요 수 :

window.onload = function() { 
 
    var canvas = document.getElementById("canvas"); 
 
    var ctx = canvas.getContext("2d"); 
 
    var W = window.innerWidth; 
 
    var H = window.innerHeight; 
 
    canvas.width = W; 
 
    canvas.height = H; 
 

 
    var mp = 1000; //max particles 
 
    var particles = []; 
 
    for (var i = 0; i < mp; i++) { 
 
    particles.push({ 
 
     x: Math.random() * W, //x-coordinate 
 
     y: Math.random() * H, //y-coordinate 
 
     r: Math.random() * 18 + 1, //radius 
 
     d: Math.random() * mp, //density 
 
     color: "rgba(" + Math.floor((Math.random() * 255)) + ", " + Math.floor((Math.random() * 255)) + ", " + Math.floor((Math.random() * 255)) + ", 0.8)", 
 
     tilt: Math.floor(Math.random() * 5) - 5 
 
    }); 
 
    } 
 

 
    //Lets draw the flakes 
 
    function draw() { 
 
    ctx.clearRect(0, 0, W, H); 
 
    for (var i = 0; i < mp; i++) { 
 
     var p = particles[i]; 
 
     ctx.beginPath(); 
 
     ctx.lineWidth = p.r; 
 
     ctx.strokeStyle = p.color; // Green path 
 
     ctx.moveTo(p.x, p.y); 
 
     ctx.lineTo(p.x + p.tilt + p.r/2, p.y + p.tilt); 
 
     ctx.stroke(); // Draw it 
 
    } 
 

 
    update(); 
 
    } 
 

 
    var angle = 0; 
 

 
    function update() { 
 
    angle += 0.01; 
 
    for (var i = 0; i < mp; i++) { 
 
     var p = particles[i]; 
 
     p.y += Math.cos(angle + p.d) + 1 + p.r/2; 
 
     p.x += Math.sin(angle) * 2; 
 
     if (p.x > W + 5 || p.x < -5 || p.y > H) { 
 
     if (i % 3 > 0) //66.67% of the flakes 
 
     { 
 
      particles[i] = { 
 
      x: Math.random() * W, 
 
      y: -10, 
 
      r: p.r, 
 
      d: p.d, 
 
      color: p.color, 
 
      tilt: p.tilt 
 
      }; 
 
     } 
 
     } 
 
    } 
 
    } 
 
    setInterval(draw, 20); 
 
}

<canvas id="canvas"></canvas>

바이올린을 JS Fiddle link

는 최종 목표 : Image

Answer 1

삼각형을 만들려면, 당신은을 그릴 할 것 모양보다는 굵은 선을 그립니다.

• 사각형이 삼각형
• 페이지 5 개 삼각형으로 시작하고 눈송이를 추가 할 수 setTimeout를 사용으로 변경됩니다

  // Rectangle 
  ctx.strokeStyle = p.color; 
  ctx.moveTo(p.x, p.y); 
  ctx.lineTo(p.x + p.tilt + p.r/2, p.y + p.tilt); 
  ctx.stroke(); 
  
  // Triangle 
  ctx.fillStyle = p.color; 
  ctx.moveTo(p.x, p.y); 
  ctx.beginPath(); 
  ctx.moveTo(p.x, p.y); 
  ctx.lineTo(p.x + 10, p.y); 
  ctx.lineTo(p.x + 5, p.y + 10); 
  ctx.fill(); 
  

  다음 코드는 모두 당신이 원하는 일을하도록 업데이트됩니다 10 분의 1 초마다. (루프가 또한 0 눈송이 시작 제거하거나 눈송이 빠르게 첨가 할 수/타임 아웃을 변경하여 느리다.)

바이올린 : https://jsfiddle.net/72dun3fx/13/

window.onload = function() { 
 
    var canvas = document.getElementById("canvas"); 
 
    var ctx = canvas.getContext("2d"); 
 
    var W = window.innerWidth; 
 
    var H = window.innerHeight; 
 
    var particles = []; 
 
    var angle = 0; 
 
    canvas.width = W; 
 
    canvas.height = H; 
 

 
    // Add starting particles 
 
    for (var i = 0; i < 5; i++) { 
 
    addParticle(); 
 
    } 
 
    // Add a particle every tenth of a second 
 
    setInterval(addParticle, 100); 
 
    // Update the particles so they fall 
 
    setInterval(draw, 20); 
 

 
    // Add a single particle 
 
    function addParticle() { 
 
    if (particles.length > 1000) { 
 
     return false; 
 
    } 
 

 
    particles.push({ 
 
     x: Math.random() * W, //x-coordinate 
 
     y: Math.random() * H, //y-coordinate 
 
     r: Math.random() * 18 + 1, //radius 
 
     d: Math.random() * particles.length, //density 
 
     color: "rgba(" + Math.floor((Math.random() * 255)) + ", " + Math.floor((Math.random() * 255)) + ", " + Math.floor((Math.random() * 255)) + ", 0.8)", 
 
     tilt: Math.floor(Math.random() * 5) - 5 
 
    }); 
 
    } 
 

 
    /* Draw the particles */ 
 
    function draw() { 
 
    ctx.clearRect(0, 0, W, H); 
 
    for (var i = 0; i < particles.length; i++) { 
 
     var p = particles[i]; 
 
     ctx.beginPath(); 
 
     ctx.lineWidth = p.r; 
 
     ctx.fillStyle = p.color; 
 
     ctx.moveTo(p.x, p.y); 
 
     ctx.beginPath(); 
 
     ctx.moveTo(p.x, p.y); 
 
     ctx.lineTo(p.x + 10, p.y); 
 
     ctx.lineTo(p.x + 5, p.y + 10); 
 
     ctx.fill(); 
 
    } 
 

 
    update(); 
 
    } 
 

 
    function update() { 
 
    angle += 0.01; 
 
    for (var i = 0; i < particles.length; i++) { 
 
     var p = particles[i]; 
 
     p.y += Math.cos(angle + p.d) + 1 + p.r/2; 
 
     p.x += Math.sin(angle) * 2; 
 
     if (p.x > W + 5 || p.x < -5 || p.y > H) { 
 
     if (i % 3 > 0) //66.67% of the flakes 
 
     { 
 
      particles[i] = { 
 
      x: Math.random() * W, 
 
      y: -10, 
 
      r: p.r, 
 
      d: p.d, 
 
      color: p.color, 
 
      tilt: p.tilt 
 
      }; 
 
     } 
 
     } 
 
    } 
 
    } 
 
};

<canvas id="canvas"></canvas>

Answer 2

I 위의 답변을 약간 수정하여 사양에 맞게 조정하십시오. 삼각형이 캔버스의 중간을 지나갈 수 없도록 Y 구성 요소를 편집했습니다. 둘째, 캔버스의 꼭대기에서 삼각형을 시작합니다. 잘하면이 도움이됩니다.

편집 :이게 당신이 찾고 있는게 뭡니까?
사이드 노트 : 나는 효과가 멋지다고 생각하기 때문에 draw() 함수에서 Math.random() * 7을 추가했지만 마음에 들지 않으면 그것을 설정 한 것 설명 된대로 이전에.

var canvas = document.getElementById("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 
var W = window.innerWidth; 
 
var H = window.innerHeight - 30; 
 
canvas.width = W; 
 
canvas.height = H; 
 

 
var particles = []; 
 
for (var i = 0; i < 100; i++) { 
 
    addParticle(); 
 
} 
 
setInterval(addParticle(), 10); 
 

 
/* Add a single particle */ 
 
function addParticle() { 
 
    if (particles.length > 1000) { 
 
    return false; 
 
    } 
 

 
    particles.push({ 
 
    x: Math.random() * W, //x-coordinate 
 
    y: H, //y-coordinate 
 
    r: Math.random() * 18 + 1, //radius 
 
    d: Math.random() * particles.length, //density 
 
    color: "rgba(" + Math.floor((Math.random() * 255)) + ", " + Math.floor((Math.random() * 255)) + ", " + Math.floor((Math.random() * 255)) + ", 0.8)", 
 
    tilt: Math.floor(Math.random() * 5) - 5 
 
    }); 
 
} 
 

 
/* Draw the particles */ 
 
function draw() { 
 
    ctx.clearRect(0, 0, W, H); 
 
    for (var i = 0; i < particles.length; i++) { 
 
    var p = particles[i]; 
 
    ctx.beginPath(); 
 
    ctx.lineWidth = p.r; 
 
    ctx.fillStyle = p.color; 
 
    ctx.moveTo(p.x, p.y); 
 
    ctx.beginPath(); 
 
    ctx.moveTo(p.x, p.y); 
 
    ctx.lineTo(p.x + 10, p.y); 
 
    ctx.lineTo(p.x + 5, p.y + (Math.random() * 7)); 
 
    ctx.fill(); 
 
    } 
 

 
    update(); 
 
} 
 

 
var angle = 0.02; 
 

 
function update() { 
 
    for (var i = 0; i < particles.length; i++) { 
 
    var p = particles[i]; 
 
    p.y += Math.cos(angle) + 1 + p.r/10; 
 
    p.x += Math.sin(angle) * 2; 
 
    if (p.x > W + 5 || p.x < -5 || p.y > H) { 
 
     if (i % 3 > 0) //66.67% of the flakes 
 
     { 
 
     particles[i] = { 
 
      x: Math.random() * W, 
 
      y: -10, 
 
      r: p.r, 
 
      d: p.d, 
 
      color: p.color, 
 
      tilt: p.tilt 
 
     }; 
 
     } 
 
    } 
 
    } 
 
} 
 
setInterval(draw, 20);

canvas { 
 
    z-index: 999; 
 
} 
 

 
.thankYouBanner { 
 
    position:absolute; 
 
    height:30px; 
 
    bottom:20%; 
 
    left:50%; 
 
    z-index: 1000; 
 
} 
 

 
.thankYouBanner h2 { 
 
    position:relative; 
 
    text-align:center; 
 
    width: 100%; 
 
    left: -50%; 
 
    color: #fff; 
 
    background-color: rgba(0,0,0,0.6); 
 
    box-shadow: 0 0 15px 10px #fff; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
    padding-top: 5px; 
 
    padding-bottom: 5px; 
 
    border-radius: 10px; 
 
}

<canvas id="canvas"></canvas> 
 
<div class="thankYouBanner"> 
 
    <h2> 
 
    Thank You, John Doh 
 
    </h2> 
 
</div>