如何在HTML5中移動一個球線？

我想單擊一個簡單的畫布應用程序來演示我的演示文稿。只要你點擊按鈕，就會有一個球以恆定的速度從左向右移動。我只是試圖展示事件的流。如何在HTML5中移動一個球線？

這是我開始的地方，並不是很多。對於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(); 
}

來源

2014-03-29 toy

到達行尾時會發生什麼？ –

它會消失。 – toy

你需要做更多的工作。 **提示：** 1）添加動畫循環以使對象可移動。 2）使用'arc（）'方法創建一個簡單的圓（球）。 3）聽取點擊事件，在動畫循環中繪製並增加圓圈（球）的「x」值。 –

簡單的帆布結構：

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）添加事件監聽到窗口例如，在處理程序中我們運行動畫：

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，你可以將它設置爲零。祝你好運！

來源

2014-03-29 21:32:57

如何在HTML5中移動一個球線？

回答

相關問題