のJavaScript：HTML5、それがHTML5に来るとき、私は<em>初心者くさい</em>午前

Question

ページと悪名高いキャンバス要素をボールをスライディング。現在、私は私のウェブページ上に青いボールを描いており、キャンバス要素をクリックすると、ボールはdrawCircle関数に渡す位置（Y）までスライドします。私はslideUp Yの場所にボール、Yの場所に飛んでボール対ボールにしたいです。ここで

は、これまでの私のコードです：

var context, canvas; 
var x = 100; 
var y = 200; 
var dx = 5; 
var dy = .02; 

function drawCircle(move) { 
    if(move) { 
     x = move.x 
     y = move.y 
    } 

    canvas = document.getElementById('myCanvas'); 
    context = canvas.getContext('2d') 
    context.clearRect(0,0,canvas.width, canvas.height); 
    context.beginPath() 
    context.fillStyle = "#0000ff"; 
    context.arc(x, y, 20, 0, Math.PI*2, true); 
    context.closePath(); 
    context.fill(); 
    // if(x < 0 || x > canvas.width) dx=-dx; 
    // if(y < 0 || y > canvas.height) dy =- dy; 

    if(move) { 
      y+=dy 
    } 

    // x+=dx 
    // y+=dy 
} 

window.onload = function(e){ 
    // setInterval(drawCircle, 10) 
    drawCircle() 
    canvas.onclick = function(){ 
     var move = { 
      x: 100, 
      y: 100 
     } 
     drawCircle(move) 
    } 
} 

JSFiddle：http://jsfiddle.net/Uam8z/1/

Answer 1

キャンバスの定義とコンテキストの設定を維持する必要はありません。これは、上にスライドします：

var context, canvas, target; 
var x = 100; 
var y = 200; 
var dx = 5; 
var dy = 2; //.2 is pretty slow 

function drawCircle() { 

    // sliding up 
    if (y > target) { 
     y -= dy; 
    } 
     context.clearRect(0, 0, canvas.width, canvas.height); 
     context.beginPath() 
     context.fillStyle = "#0000ff"; 
     context.arc(x, y, 20, 0, Math.PI * 2, true); 
     context.fill(); 
     context.closePath(); 

} 

window.onload = function() { 

    // get canvas, and context once 
    canvas = document.getElementById('myCanvas'); 
    context = canvas.getContext('2d'); 

    // set target y position 
    canvas.onclick = function (e) { 
     target = e.clientY; 
    } 
    // 30fps 
    setInterval(drawCircle, (1000/30)); 
} 

Answer 2

あなたのコードは、提案のようにあなたは、これは私がそれをやった方法です、setInterval機能を使用することができます。..

var context, canvas; 
    var x = 100; 
    var y = 200; 
    var dx = 5; 
    var dy = 5; //0.02 makes it move v. slowly! 

    function drawCircle(move) { 
     if(move) { 
      x = move.x 
      y = move.y 
     } 

     context.clearRect(0,0,canvas.width, canvas.height); 
     context.beginPath() 
     context.fillStyle = "#0000ff"; 
     context.arc(x, y, 20, 0, Math.PI*2, true); 
     context.closePath(); 
     context.fill(); 
    } 

    window.onload = function(e){ 
     canvas = document.getElementById('myCanvas'); 
     context = canvas.getContext('2d'); 
     drawCircle() 
     var interval; 
     canvas.onclick = function(){ 
      if(interval) //don't run if already doing so.. 
       return; 
      var end_move = { 
       x: 100, 
       y: 100 
      }; 
      var interval = setInterval(function(){ 
       if(x === end_move.x && y === end_move.y){ 
        //stop animation case.. 
        clearInterval(interval); 
        interval = undefined; 
       } else { 
        var newX; 
        if(Math.abs(x - end_move.x) < dx){ 
         newX = x; 
        } else { 
         newX = (x > end_move.x) ? x-dx : x+dx; 
        } 
        var newY; 
        if(Math.abs(y - end_move.y) < dy){ 
         newY = y; 
        } else { 
         newY = (y > end_move.y) ? y-dy : y+dy; 
        } 
        drawCircle({ 
         x: newX, 
         y: newY 
        }); 
       } 
      }, 10); 
     } 
    } 

コードはend_positionに設定され、ボールが終わるはずです。次に、各反復で同じ距離を移動する間隔を設定します。希望の位置に近づくと、希望の位置に設定して間隔が終了することが保証されます。