애니메이션 루프 및 비율 조정

Question

음, 몇 가지 질문을했습니다. 첫째,이 코드가하는 일은 모두 독특한 밀도의 눈송이를 만들고 그리는 것입니다.이 눈송이는 모두 다른 속도로 떨어질 것입니다. 첫 번째 질문은이 루프를 어떻게 연속되게 만드는 것입니까?

두 번째로 원점 (0,0)을 캔버스 중앙으로 변환했습니다 (조건의 일부 임). 나는 이제 눈이 내렸을 때 화면의 왼쪽이나 오른쪽 모두에 그려지는이 문제를 가지고있다. 어떻게 해결할 수 있을까요?

마침내 애니메이션을 할 때 각 다시 그리기 후에 캔버스를 지워야한다는 것을 알고 있지만 이것을 추가하지 않았지만 여전히 잘 작동합니까? 애니메이션 소개

//Check to see if the browser supports 
//the addEventListener function 
if(window.addEventListener) 
{ 
    window.addEventListener 
    (
     'load', //this is the load event 
     onLoad, //this is the evemnt handler we going to write 
     false //useCapture boolen value 
    ); 
} 

//the window load event handler 
function onLoad(Xi, Yy) { 
    var canvas, context,treeObj, H, W, mp; 
    Xi = 0; 
    Yy = 0; 
    mp = 100; 

    canvas = document.getElementById('canvas'); 
    context = canvas.getContext('2d'); 

    W = window.innerWidth; 
    H = window.innerHeight; 
    canvas.width = W; 
    canvas.height = H; 
    context.translate(W/2, H/2); 

    var particles = []; 
    for(var i = 0; i < mp; i++) { 

     particles.push({ 
     x: Math.random()*-W, //x 
     y: Math.random()*-H, //y 
     r: Math.random()*6+2, //radius 
     d: Math.random()* mp // density 
     }) 
    } 


    treeObj = new Array(); 
    var tree = new TTree(Xi, Yy); 
    treeObj.push(tree); 



    function drawCenterPot(){ 
     context.beginPath(); 
     context.lineWidth = "1"; 
     context.strokeStyle = "Red"; 
     context.moveTo(0,0); 
     context.lineTo(0,-H); 
     context.lineTo(0, H); 
     context.lineTo(-W, 0); 
     context.lineTo(W,0); 
     context.stroke(); 
     context.closePath(); 
    } 

    function drawMountain() { 
     context.beginPath(); 
     context.fillStyle = "#FFFAF0"; 
     context.lineWidth = "10"; 
     context.strokeStyle = "Black"; 
     context.moveTo(H,W); 
     context.bezierCurveTo(-H*10,W,H,W,H,W); 
     context.stroke(); 
     context.fill(); 
    } 

    function drawSky() { 
     var linearGrad = context.createLinearGradient(-100,-300, W/2,H); 
     linearGrad.addColorStop(0, "#000000"); 
     linearGrad.addColorStop(1, "#004CB3"); 
     context.beginPath(); 
     context.fillStyle = linearGrad; 
     context.fillRect(-W/2, -H/2, W, H); 
     context.stroke(); 
     context.fill(); 


     drawMountain(); 
     drawCenterPot(); 

    } 




    function drawSnow(){ 
    context.fillStyle = "White"; 
     context.beginPath(); 
     for(i = 0; i<mp; i++) 
     { 
      var p = particles[i]; 
      context.moveTo(p.x,p.y); 
      context.arc(p.x, p.y, p.r, Math.PI*2, false); 
     } 
     context.fill(); 
    } 


    function update() { 
     var angle = 0; 
     angle+=0.1; 
     for(var i=0; i<mp; i++) { 
      var p = particles[i]; 
      p.x += Math.sin(angle) * 2; 
      p.y += Math.cos(angle+p.d) + 1 * p.r; 
     } 

     drawSky(); 
     drawSnow(); 
     draw(); 
    } 

    function draw() { 
     for(var i =0; i < treeObj.length; i++) 
     { 
     context.save(); 
     context.translate(Xi-H,Yy-W); 
     context.scale(1, 1); 
     treeObj[0].draw(context); 
     context.restore(); 
     } 
    } 

     setInterval(update, 33); 




} 

Answer 1

: 당신의 조각은 캔버스의 바닥 아래보기에서 떨어지고있다 무슨 일

.

그럼 언제 어떤 플레이크의 p.y + 홍보> canvas.height 그럴 수 :

• 그 플레이크를 파괴하고 (선택적으로) 또 다른 캔버스 위에서 떨어지는 추가

또는

• "재사용"은 py를 캔버스 위로 변경하여 조각을 만듭니다. 당신의 디자인에

  , 당신은 "하늘"과 전체 캔버스를 채울 때, 당신은 효과적으로 캔버스를 삭제됩니다 context.clearRect없이 작업 설계에 대해

. 대신 중간 화면으로 번역

: 당신의 조각 절반 만 화면에 떨어지는 소개

• 전혀 번역) (PX 어떤 인 Math.random하자하지 마십시오 * canvas.width