如何使我的畫布動畫不循環

-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代碼。在這裏它會自動循環..我想要取消循環，並只在點擊時播放畫布如何做到這一點。在這個如何使我的畫布動畫不循環

來源

2013-07-24 SARAVANA KUMAR

爲click事件添加事件處理程序。在那個處理程序中設置了一個標誌，'點擊'。現在，改變你的上面的代碼 - 只有在這個標誌沒有被設置的情況下才調用setInterval。你需要做的標誌全球，並初始化爲0 – enhzflep

@enhzflep請簡要解釋，我不明白您的評論，因爲我是帆布的動畫新的..請 –

沙拉灣

請投光燈，那裏有許多不同的方式，你可以去這個問題。最佳做法，我相信是使用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-24 08:04:41 enhzflep

我理解你的程序..但我無法執行我的..所以，當你有時間，請編輯我的代碼，並有幫助 –

@Saravaankumar - 這通常被認爲是可憐的etiquete。你甚至沒有要求我修復你的代碼，你實際上告訴我這麼做，並在需求之前提出'請'。我認爲這是翻譯成英文時丟失的東西。我會在一兩分鐘內編輯我的答案。您必須更改（a）圖像源和（b）畫布的尺寸。動畫在頁面加載時啓動，您可以通過單擊畫布來停止/恢復動畫。我還添加了一條狀態消息，因此您知道播放狀態和當前幀。希望它有幫助。 – enhzflep

謝謝大家對你的幫助.... –

如何使我的畫布動畫不循環

回答

相關問題