HTML5アニメーションを変更する

Question

このHTML5アニメーションの開始点を設定するにはどうすればよいですか？

基本的には、画面のボタンから100pxのサイクリングを開始するのが好きです。

私はhtml5 canvasの初心者です。 おそらく、これには簡単な解決策があります。

ご協力いただきありがとうございます。

window.requestAnimFrame = (function() { 
 
    return window.requestAnimationFrame || 
 
    window.webkitRequestAnimationFrame || 
 
    window.mozRequestAnimationFrame || 
 
    window.oRequestAnimationFrame || 
 
    window.msRequestAnimationFrame || 
 
    function(callback) { 
 
     window.setTimeout(callback, 1000/60); 
 
    }; 
 
})(); 
 

 
var c = document.getElementById('canv'), 
 
    $ = c.getContext('2d'); 
 

 
    c.width = window.innerWidth; 
 
    c.height = window.innerHeight; 
 

 
window.addEventListener('resize', function(){ 
 
    c.width = window.innerWidth; 
 
    c.height = window.innerHeight; 
 
}, false); 
 

 
var arr = []; 
 

 
var go = function() { 
 
    $.fillStyle = "hsla(0,0%,10%,.8)"; 
 
    $.fillRect(0, 0, c.width, c.height); 
 
    
 
    var p = new Part(c.width/2 , c.height); 
 
    p.vx = Math.random() * 10-5; 
 
    arr.push(p); 
 

 
    for (var i in arr) { 
 
    var p = arr[i]; 
 
    p.disp($); 
 
    p.upd(); 
 
    } 
 

 
    if (arr.length > 500) { 
 
    arr.shift(); 
 
    } 
 
} 
 

 
var rnd = function(min, max) { 
 
    return Math.random() * (max - min) + min; 
 
} 
 

 
var Part = function(px, py) { 
 
    this.px = px; 
 
    this.py = py; 
 
    this.vy = rnd(1.1, 2)*-8*1.1; 
 
    this.vx = rnd(1.1, 2)*5*1.1; 
 
    
 
    this.grav = 0.1; 
 
    this.col = 0; 
 
    this.rad = rnd(5,30); 
 
    this.disp = function($) { 
 
    $.fillStyle = "hsla(" + this.col + ", 95%, 60%, .8)"; 
 
    $.beginPath(); 
 
    $.arc(this.px, this.py, this.rad, 0, Math.PI*2); 
 
    $.fill(); 
 
    } 
 
    
 
    this.upd = function() { 
 
     this.vy += this.grav; 
 
     this.py += this.vy*1.1; 
 
     this.px += this.vx* 1.1; 
 
     this.col += 2; 
 
    } 
 
} 
 

 
var run = function() { 
 
    window.requestAnimFrame(run); 
 
    go(); 
 

 
} 
 
run();

body{ 
 
    width:100%; 
 
    margin:0; 
 
    overflow:hidden; 
 
    background:hsla(0,0%,10%,1); 
 
}

<canvas id = 'canv'></canvas>

Answer 1

あなたはアニメーションの下から100pxにを開始し、下へ移動、または下から100pxにに滞在したいですか？

goの中には、c.widthとc.heightの両方がウィンドウのHとWから取得されていることがわかります。これらはfillRect（バックグラウンド）とp変数に使用されます。 pには、new Partが含まれています。これは、c.heightでプレーする必要がある場所でなければなりません。アニメーションを下から上に移動する最も簡単な方法は、c.heightから100を引くだけです。つまり、アニメーションの高さはウィンドウの高さから100ピクセルを引いた値になります。これはvar p = new Part(c.width/2 , c.height-100);となり、あなたの望む通りに見えます。