Анимационный цикл и масштабирование

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 любой Flake в + пр> canvas.height вы можете:

• уничтожить эту чешуйку и (необязательно) добавить еще один падающий сверху холста

или

• «перерабатывать», которые хлопнули, изменив свою ручку на холст.

О вашей конструкции работала без context.clearRect:

В вашей конструкции, когда вы заполняете весь холст с «небом», вы эффективны клиринговым холстом.

О ваших хлопья только падающие на половину экрана:

Вместо перевода до середины экрана:

• Не перевести на всех, и пусть рх любой Math.random() * canvas.width