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

Chrome, Firefox иIE9 весь вывод:

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

… показывая, что контекст изменился, как только я позвонил 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

Однако первая строка отображается сразу, а вторая отображается только после паузы.Тот факт, что 2-я и 3-я строки одинаковы, является убедительным (но косвенным) доказательством того, что содержимое контекста холста изменяется только при вызове операции 'commit' (например, обводка / заливка) и сразу становится доступным после этого.