Html 如何使画布动画不循环函数hum（）{ 可变宽度=280，高度=210，帧=3， currentFrame=0， hump=document.getElementById（“Canvas2”）.getContext（“2d”）； humpImage=新图像（） humpImage.src='images/hum.png'； var draw=函数（）{ 驼峰净高（0，0，宽度，高度）； hump.drawImage（hump图像，0，高度*当前帧，宽度，高度，0，0，宽度，高度）；如果（当前帧==帧）{ currentFrame=0； }否则{ currentFrame++； } } 设置间隔（抽签，150）； }_Html_Css_Html5 Canvas

Html 如何使画布动画不循环函数hum（）{ 可变宽度=280，高度=210，帧=3， currentFrame=0， hump=document.getElementById（“Canvas2”）.getContext（“2d”）； humpImage=新图像（） humpImage.src='images/hum.png'； var draw=函数（）{ 驼峰净高（0，0，宽度，高度）； hump.drawImage（hump图像，0，高度*当前帧，宽度，高度，0，0，宽度，高度）；如果（当前帧==帧）{ currentFrame=0； }否则{ currentFrame++； } } 设置间隔（抽签，150）； }

html css html5-canvas

Html 如何使画布动画不循环函数hum（）{ 可变宽度=280，高度=210，帧=3， currentFrame=0， hump=document.getElementById（“Canvas2”）.getContext（“2d”）； humpImage=新图像（） humpImage.src='images/hum.png'； var draw=函数（）{ 驼峰净高（0，0，宽度，高度）； hump.drawImage（hump图像，0，高度*当前帧，宽度，高度，0，0，宽度，高度）；如果（当前帧==帧）{ currentFrame=0； }否则{ currentFrame++； } } 设置间隔（抽签，150）； },html,css,html5-canvas,Html,Css,Html5 Canvas,上面是一个画布动画javascript代码。在这里，它会自动循环。。我想取消循环，只在单击“如何做”时播放画布请注意这件事，Saravan，你有很多不同的方法可以做到这一点。我认为最好的做法是使用RequestAnimationFrame函数，尽管我在这里似乎找不到任何使用过它的旧源代码我注意到在您的代码中，每次在draw循环中调用setInterval。除非我弄错了，否则正确的函数实际上是setTimeOut。从我的代码（和js帮助）中可以看到，函数setInterval只需要调用一次当

上面是一个画布动画javascript代码。在这里，它会自动循环。。我想取消循环，只在单击“如何做”时播放画布

请注意这件事，Saravan，你有很多不同的方法可以做到这一点。我认为最好的做法是使用RequestAnimationFrame函数，尽管我在这里似乎找不到任何使用过它的旧源代码

我注意到在您的代码中，每次在draw循环中调用setInterval。除非我弄错了，否则正确的函数实际上是

setTimeOut

。从我的代码（和js帮助）中可以看到，函数setInterval只需要调用一次

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

很晚了，我累了。这应该给你足够的时间继续下去

编辑：新代码。

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


函数byId（e）{returndocument.getElementById（e）；}
函数newEl（tag）{returndocument.createElement（tag）；}
window.addEventListener（'load'，mInit，false）；
间隔柄；
var驼峰，驼峰图像，isRunning=假；
变量宽度=44，高度=128，帧=3，当前帧=0；
var myImageSource='temperator.png'；
函数mInit（）
{
byId（'Canvas2'）。addEventListener（'click'，onCanvasClick，false）；
initAndStartAnim（）；
}
函数onCanvasClick（）
{
如果（正在运行）
{
clearInterval（drawIntervalHandle）；
isRunning=false；
byId（'status'）。innerHTML=“已停止，帧：”+currentFrame；
}
其他的
{
drawIntervalHandle=设置间隔（draw，150）；
isRunning=true；
}
}
函数绘图（）
{
驼峰净高（0，0，宽度，高度）；
hump.drawImage（hump图像，0，高度*当前帧，宽度，高度，0，0，宽度，高度）；
如果（当前帧==帧）
currentFrame=0；
其他的
currentFrame++；
byId（'status'）。innerHTML=“正在运行，帧：”+currentFrame；
}
函数initAndStartAnim（）
{
var can=document.getElementById（“Canvas2”）；
can.width=宽度；
can.height=高度；
hump=can.getContext（'2d'）；
humpImage=新图像（）
humpImage.src=myImageSource；
drawIntervalHandle=设置间隔（draw，150）；
isRunning=true；
}
如果您看到此情况，则不支持画布：(

为单击事件添加一个事件处理程序。在该处理程序中设置一个标志“clicked”。现在，更改上面的代码-如果未设置此标志，则仅调用setInterval。您需要将该标志设为全局标志并将其初始化为0。@enhzflep请简要解释，我无法理解您的注释，因为我是画布动画的新手。。请理解你的程序…但我不能在我的程序上实现…所以当你有时间的时候，请编辑我的代码并执行helpful@Saravaankumar-这通常被认为是糟糕的etiquete。你甚至没有要求我修复你的代码，你实际上已经告诉我去做，并在请求之前加上了一个“请”字。我想这只是在翻译成英语。我会在一两分钟内编辑我的答案。你必须改变（a）图片来源和（b）画布的尺寸。动画是在页面加载时开始的，您可以通过单击画布停止/恢复动画。我还添加了一条状态消息，以便您知道播放状态和当前帧。希望它有帮助。另一个帮助我正在开发javascript应用程序。我正在其中嵌入一个图像，我希望在触摸时可以看到一些动画星光或粒子的图像应该分散一会儿。有人知道怎么做吗。如果有人知道怎么做，请让我知道。通过给我一个代码示例，这是我的开始uo项目，请帮助我

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