-1 
<script>      
function hum() {
    var width = 280,
        height = 210,
        frames = 3,

        currentFrame = 0,

        hump = document.getElementById("Canvas2").getContext('2d');
    humpImage = new Image()
    humpImage.src = 'images/hum.png';

    var draw = function () {
        hump.clearRect(0, 0, width, height);
        hump.drawImage(humpImage, 0, height * currentFrame, width, height, 0, 0, width, height);

        if (currentFrame == frames) {
            currentFrame = 0;
        } else {
            currentFrame++;
        }
    }

    setInterval(draw, 150);

}
</script>

以上是画布动画javascript代码。在这里它会自动循环。我想取消循环并仅在单击如何操作时播放画布。

请注意这一点

4

1 回答 1

0

Saravan，有很多不同的方法可以解决这个问题。最佳实践，我相信是使用 RequestAnimationFrame 函数，虽然我似乎没有在这里找到任何我使用过的旧源代码。

我注意到在您的代码中，每次在绘制循环周围，您都会调用 setInterval。除非我弄错了，否则使用的正确功能实际上是setTimeOut. 从我的代码中可以看出，（和 js 帮助）函数 setInterval 只需要调用一次。

当您调用它时，它会为您提供一个唯一标识符，以后可以使用该标识符来删除间隔处理程序。这就是我使用的方法。单击按钮时，将设置间隔并保存句柄。然后，当单击画布时，我只需删除间隔处理程序。

时间不早了，我累了。这应该给你很多继续。

编辑：新代码。

<!DOCTYPE html>
<html>
<head>
<script>
function byId(e){return document.getElementById(e);}
function newEl(tag){return document.createElement(tag);}

window.addEventListener('load', mInit, false);

var drawIntervalHandle;
var hump, humpImage, isRunning = false;
var width = 44,height = 128,frames = 3,currentFrame = 0;
var myImageSource = 'thermometer.png';

function mInit()
{
    byId('Canvas2').addEventListener('click', onCanvasClick, false);
    initAndStartAnim();
}

function onCanvasClick()
{
    if (isRunning)
    {
        clearInterval(drawIntervalHandle);
        isRunning = false;
        byId('status').innerHTML = "Stopped, frame: " + currentFrame;
    }
    else
    {
        drawIntervalHandle = setInterval(draw, 150);
        isRunning = true;
    }
}

function draw() 
{
    hump.clearRect(0, 0, width, height);
    hump.drawImage(humpImage, 0, height * currentFrame, width, height, 0, 0, width, height);

    if (currentFrame == frames)
        currentFrame = 0;
    else 
        currentFrame++;
    byId('status').innerHTML = "Running, frame: " + currentFrame;
}

function initAndStartAnim() 
{
    var can = document.getElementById("Canvas2");
    can.width = width;
    can.height = height;
    hump = can.getContext('2d');
    humpImage = new Image()
    humpImage.src = myImageSource;

    drawIntervalHandle = setInterval(draw, 150);
    isRunning = true;
}

</script>
<style>
</style>
</head>
<body>
<canvas id='Canvas2'>Canvas not supported if you see this. :(</canvas>
<br>
<div id='status'></div>
</body>
</html>
于 2013-07-24T08:04:41.543 回答