HTML5에서 한 행 위로 공을 이동하는 방법은 무엇입니까?

Question

간단한 캔버스 응용 프로그램을 클릭하여 프레젠테이션을 시연하려합니다. 버튼을 클릭하면 공이 일정한 속도로 왼쪽에서 오른쪽으로 움직입니다. 나는 단지 사건들의 흐름을 보여주기 위해 노력하고있다.

내가 시작하는 곳은 어디에도 없습니다. begginers에 대한 http://jsfiddle.net/noppanit/z5VwL/1/

<canvas id="myCanvas" width="578" height="200"></canvas> 

<input type="button" onclick="clickToAddBall()" value="Click"/> 



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

context.beginPath(); 
context.moveTo(10, 10); 
context.lineTo(400, 10); 
context.stroke(); 


function clickToAddBall() { 
    // Do something 
} 

function gameLoop() { 
    var loop = 400; 
    setInterval(function() { 
     loop = loop - 10; 
     drawABall(loop); 
    }, 200); 
} 
gameLoop(); 

function drawABall(positionX) { 
     var centerX = canvas.width/2; 
     var centerY = canvas.height/2; 
     var radius = 5; 

     context.beginPath(); 
     context.arc(positionX, 10, radius, 0, 2 * Math.PI, false); 
     context.fillStyle = 'green'; 
     context.fill(); 
     context.lineWidth = 5; 
     context.strokeStyle = '#003300'; 
     context.stroke(); 
} 

Answer 1

간단한 캔버스 구조 :

1) 애니메이션 루프 :

// RequestAnimFrame: a browser API for getting smooth animations 
window.requestAnimFrame = (function() { 
    return window.requestAnimationFrame || 
     window.webkitRequestAnimationFrame || 
     window.mozRequestAnimationFrame || 
     window.oRequestAnimationFrame  || 
     window.msRequestAnimationFrame  || 
     function(callback) { 
      return window.setTimeout(callback, 1000/1000); 
     }; 
})(); 
window.cancelRequestAnimFrame = (function() { 
    return window.cancelAnimationFrame    || 
     window.webkitCancelRequestAnimationFrame || 
     window.mozCancelRequestAnimationFrame  || 
     window.oCancelRequestAnimationFrame   || 
     window.msCancelRequestAnimationFrame  || 
     clearTimeout 
})(); 

2) 볼

ball = { 
    x: canvas.width/2 - 10, 
    y: canvas.height/2 , 
    r: 12, 
    c: 'white', 
    vx: 8, 
    vy: 8, 

    // function for drawing ball on canvas 
    draw: function() { 
     ctx.beginPath(); 
     ctx.fillStyle = this.c; 
     ctx.arc(this.x, this.y, this.r, 0, Math.PI*2, false); 
     ctx.fill(); 
    } 

만들기 3) 예를 들어 창으로의 EventListener 추가 , 핸들러에서 우리는 애니메이션을 실행합니다 :

var canvas = document.getElementById('mycanvas'), 
var run = true; 
canvas.addEventListener("mousedown", btnClick, true); 
function btnClick(e) { 
    if(run){ 
        ball.draw(); 
     animloop(); 
     run = false; 
    } 
} 

4) 업데이트 기능을 사용하여 모든 프레임에서 볼의 x, y 위치를 변경합니다. 모든 것을 그립니다

function Update() { 
    // Move the ball 
    ball.x += ball.vx; 
    ball.y += ball.vy; 
} 

5) 기능, unlimeted 루프 :

function animloop() { 
    init = requestAnimFrame(animloop); 
    Update(); 
} 

6) 볼 캔버스 창에서 사라 것입니다. 그것을 위해 당신은 충돌 탐지가 필요합니다. 만약 ball.x> some.value THEN ball.vx = 0; vy가 필요 없다면, 0으로 설정할 수 있습니다. 행운을 빕니다!