Html5 canvas如何知道它何時完成渲染

Question

請原諒我的英文。 繪製如果更多的數字和圖片在畫布上。 我怎麼知道他什麼時候完成渲染？ 謝謝:)

Answer 1

據我所知，畫布總是會立即被您的繪圖命令的結果修改。由於JS是單線程的，你的下一行JS代碼將不會執行，直到你的更改被提交。

下面是一些簡單的測試代碼：

var c = document.createElement('canvas'); 
c.width = c.height = 1; 
var ctx = c.getContext('2d'); 
console.log([].join.call(ctx.getImageData(0,0,1,1).data)); 
ctx.fillStyle = "red"; 
ctx.fillRect(0,0,1,1); 
console.log([].join.call(ctx.getImageData(0,0,1,1).data)); 

鉻，Firefox和IE9所有輸出：

0,0,0,0 
255,0,0,255 

＆hellip;顯示該上下文被儘快改變我稱爲fillRect。

這裏的一個更強大的測試：

function showBox(){console.log([].join.call(ctx.getImageData(0,0,2,2).data))} 
var c = document.createElement('canvas'); 
c.width = c.height = 1000; 
var ctx = c.getContext('2d'); 
showBox(); 
ctx.fillStyle = "rgba(255,0,0,0.02)"; 
for (var i=1;i<50000;++i) ctx.fillRect(0,0,1000,1000); 
showBox(); 
setTimeout(showBox,2000); 

通過上述，可以看到這樣的輸出：

0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 
255,0,0,230,255,0,0,230,255,0,0,230,255,0,0,230 
255,0,0,230,255,0,0,230,255,0,0,230,255,0,0,230 

然而，第一行立即顯示，並且第二行後一箇中僅示出暫停。第二行和第三行相同的事實是強烈的（但是間接的）證據，即只有當您調用「提交」操作（例如筆畫/填充）時，畫布上下文的內容纔會改變，並且此後立即可用。