![](/img/trans.png)
[英]how to pause a html5 canvas javascript animation with a keyboard input
[英]HTML5/Javascript - Trying to get bind a canvas animation to a keyboard event
這是我第一次使用JavaScript進行鍵盤事件,但事實上我知道動畫是有效的。 這個想法很簡單:播放用戶按下Enter鍵時移動的矩形動畫。 下面是我的代碼。
//Event listeners
window.addEventListener("keydown", onKeyDown, false);
function onKeyDown(event){
var keyCode = event.keyCode;
switch(keyCode){
case 13 //enter
drawStuff();
break;
}
}
//code to be executed onKeyDown
function drawStuff(){
var x = document.getElementById("myCanvas");
var canvas = x.getContext('2d');
var i = 0;
function animate(){
if(i < 451){
canvas.clearRect(0,0,500,500);
canvas.fillStyle="red";
canvas.fillRect(30,i,50,50);
i++;
}
else{}
}
window.setInterval(animate, 1);
}
任何建議如何解決此問題?
看看Paul Irish的requestAnimationFrame
墊片 ; 與setInterval方法相比,rAF具有許多優點; 主要是因為它是專門為執行此操作而構建的,而且它僅在瀏覽器就緒時才請求幀,因此它可以暫停您的網站在后台運行時發生的事情。 切換時,我還注意到性能更流暢。
我說這樣的事情應該起作用:
var animationHasTriggered = false;
var x = document.getElementById("myCanvas");
var canvas = x.getContext('2d');
var keysDown = {};
var i = 0;
window.addEventListener('load', function()
{
addEventListener("keydown", function(e)
{
keysDown[e.keyCode] = true;
}, false);
addEventListener("keyup", function(e)
{
delete keysDown[e.keyCode];
}, false);
updateAll();
}, false);
function updateAll()
{
if (13 in keysDown || animationHasTriggered)
{
animationHasTriggered = true;
animate();
}
requestAnimationFrame(updateAll);
}
function animate()
{
if (i < 451)
{
canvas.clearRect(0,0,500,500);
canvas.fillStyle="red";
canvas.fillRect(30,i,50,50);
i++;
}
else
{
animationHasTriggered = false;
}
}
(function()
{
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x)
{
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element)
{
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function()
{
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id)
{
clearTimeout(id);
};
}());
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.