HTML5画布图像没有移动

Question

I have a problem. 我有个问题。 I'm using HTML5 and Javascript to draw a box onto a canvas. 我正在使用HTML5和Javascript在画布上绘制框。 This box is supposed to move up and down, but after it gets rendered for the first time, it doesn't want to re-render at the new position. 该框应该上下移动，但是在第一次渲染后，它不想在新位置重新渲染。 This is the code: 这是代码：

<!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>

I have no clue why the box isn't moving. 我不知道为什么盒子不动。 It's like after I draw it for the first time it won't draw again the next time. 就像我第一次绘制后，下次将不再绘制。 Also, I use mainLoop() function as my main loop. 另外，我将mainLoop（）函数用作主循环。 Every 10 miliseconds I basically call the main() function, which does the drawing and the logic. 我基本上每10毫秒调用一次main（）函数，该函数执行绘制和逻辑处理。 Any help would be much appreciated. 任何帮助将非常感激。 :) :)

Answer 1

A few coding problems: 一些编码问题：

You need to give your image time to load, then start the animation 您需要给图像加载时间，然后开始动画

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

setInterval takes in a function pointer (no parentheses): setInterval接受一个函数指针（不带括号）：

setInterval will fire only as fast as 16ms, so your 10ms value is too small setInterval仅能以最快16ms的速度触发，因此您的10ms值太小

    setInterval(main, 20);

Here's revised code and a Demo: http://jsfiddle.net/m1erickson/U6K9j/ 这是修改后的代码和演示： 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>

Answer 2

You're calling main and then passing the RESULT to setInterval . 您正在调用main ，然后将RESULT传递给setInterval 。 Just change 只是改变

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

to 至

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

That'll get you started, but you'll also need to clear the canvas in between draws. 这可以帮助您入门，但是您还需要在两次绘制之间清除画布。 (As you'll notice if you run this) （您会注意到，如果您运行此程序）

HTML5画布图像没有移动

问题描述

2 个解决方案

解决方案1
1 2014-03-18 19:37:03

解决方案2
0 2014-03-18 19:14:05

HTML5画布图像没有移动

问题描述

2 个解决方案

解决方案1 1 2014-03-18 19:37:03

解决方案2 0 2014-03-18 19:14:05

解决方案1
1 2014-03-18 19:37:03

解决方案2
0 2014-03-18 19:14:05