暫停和恢復HTML5畫布？

有沒有辦法讓HTML5 Canvas暫停/恢復？暫停和恢復HTML5畫布？

說我的代碼：

// Draw lines with decreasing widths 
for (i = 20; i > 0; i--) 
{ 
    var v=i*20 
    ctx.strokeStyle = "rgb("+v+", "+v+", "+v+")"; 
    ctx.lineWidth = i; 
    ctx.beginPath(); 
    ctx.moveTo(55, 20 + (20 - i) * 24); 
    ctx.lineTo(335, 20 + (20 - i) * 24); 
    ctx.stroke(); 
}

在代碼的開始，我想暫停（）的意思，我會告訴瀏覽器「確定你真的沒有浪費做任何的任何資源實際繪製「，我只是要告訴你的命令。然後循環後，我會打電話Resume（）意思是「好吧，你可以開始畫他們現在」

btw沒有人知道是否有一個JavaScript的上下文對象的完整引用（我無法在谷歌找到它也沒有MDC ..）

來源

2011-05-31 Pacerier

上下文對象的完整引用在這裏：http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html – 2011-05-31 15:12:24

@Simon Sarris thxalot – Pacerier 2011-06-01 08:45:22

嘗試繪製的線條屏幕外，而不是「暫停」畫布：http://kaioa.com/node/103

這將有同樣的結果。

var renderToCanvas = function (width, height, renderFunction) { 
    var buffer = document.createElement('canvas'); 
    buffer.width = width; 
    buffer.height = height; 
    renderFunction(buffer.getContext('2d')); 
    return buffer; 
};

（從上面提到的網頁採取代碼段），我已經解決了資源使用的這個問題時，什麼也沒有發生

來源

2011-05-31 05:28:32 rdmueller

一種方式是通過設置VAR isStarted = FALSE;

然後根據動畫是否有動畫來打開和關閉它。

然後使用VAR來控制你的setTimeout/requestAnimFrame

if (isStarted) { 
    setTimeout(function() {}, 1000/33);// animation loop thing 
}

我這樣做是爲了一個遊戲環境我開始建立和它完美的作品。

來源

2011-11-16 04:30:43 jaredwilli

暫停和恢復HTML5畫布？

回答

相關問題