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画布图像不移动

回答

相关问题