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

然而，第一行立即显示，第二行仅在暂停后显示。第二行和第三行相同的事实是强有力的（但是间接的）证据，即画布上下文的内容仅在您调用“提交”时才会改变。操作（例如中风/填充），此后立即可用。

Html5画布我怎么知道它何时完成渲染

1 个答案: