HTML5畫布圖像不移動

我遇到問題。我正在使用HTML5和Javascript在畫布上繪製一個框。這個盒子應該上下移動，但是在它第一次渲染之後，它不想在新的位置重新渲染。這是代碼：HTML5畫布圖像不移動

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sl" lang="sl"> 
<head> 
    <title>Spletna stran Portfolio - Domaca stran</title> 

    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 

    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> 

    <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />  

    <script> 
    var isMoving = true; 

    var gradienty = 0; 
    var gradientheight = 100; 
    var gradientyVel = 1; 

    var gradientImage = new Image(); 
    gradientImage.src = "grafika/gradient.gif"; 

    function main() { 
     var c = document.getElementById("menuCanvas"); 
     var ctx = c.getContext("2d"); 
     ctx.drawImage(gradientImage, 0, gradienty); 
     if(isMoving == true) { 
      gradienty += gradientyVel; 
      if((gradienty+gradientheight)==c,height || gradienty<=0) { 
       gradientyVel *= -1; 
      } 
     } 
    } 

    function mainLoop() { 
     setInterval(main(), 10); 
    } 

    </script> 

</head> 
<body onload="mainLoop()"> 
<canvas id="menuCanvas" width="195" height="400"></canvas> 
</body> 
</html>

我不知道爲什麼箱子沒有移動。這就像我第一次畫它後下一次不會再畫。另外，我使用mainLoop（）函數作爲我的主循環。每10毫秒我基本上調用main（）函數，它執行繪圖和邏輯。任何幫助將不勝感激。 :)

來源

2014-03-18 user3154699

您打電話給main，然後將結果傳遞給setInterval。只要改變

function mainLoop() { 
    setInterval(main(), 10); 
}

到

function mainLoop() { 
    setInterval(main, 10); 
}

這將讓你開始，但你還需要清除畫布繪製中之間。（如你，如果你運行這個通知）

來源

2014-03-18 19:14:05

幾個編碼問題：

你需要給你的圖像的時間來加載，然後開始動畫

var gradientImage = new Image(); 
gradientImage.onload=function(){ 
    setInterval(main, 20); 
} 
gradientImage.src = "house16x16.png";

setInterval的需要在函數指針中（無括號）：

setInterval將只觸發16ms，所以你的10ms值太小

setInterval(main, 20);

這裏的修改後的代碼和演示：http://jsfiddle.net/m1erickson/U6K9j/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<style> 
    body{ background-color: ivory; } 
    canvas{border:1px solid red;} 
</style> 
<script> 
$(function(){ 

    var c=document.getElementById("menuCanvas"); 
    var ctx=c.getContext("2d"); 

var isMoving = true; 

var gradienty = 0; 
var gradientheight = 100; 
var gradientyVel = 1; 

var gradientImage = new Image(); 
gradientImage.onload=function(){ 
    setInterval(main, 20); 
} 
gradientImage.src = "house16x16.png"; 

function main() { 
    ctx.clearRect(0,0,c.width,c.height); 
    ctx.drawImage(gradientImage, 0, gradienty); 
    if(isMoving == true) { 
     gradienty += gradientyVel; 
     if((gradienty+gradientheight)==c.height || gradienty<=0) { 
      gradientyVel *= -1; 
     } 
    } 
} 

}); // end $(function(){}); 
</script> 
</head> 
<body> 
    <canvas id="menuCanvas" width=300 height=300></canvas> 
</body> 
</html>

來源

2014-03-18 19:37:03 markE

HTML5畫布圖像不移動

回答

相關問題