Html5 canvas 我怎么知道它什么时候完成渲染

Question

请原谅我的英语。在 Canvas 上绘制更多图形和图片。我怎么知道他什么时候完成渲染？谢谢:)

Answer 1

据我所知，您的绘图命令的结果总是会立即修改 Canvas 。由于 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 行相同这一事实有力(但间接地)证明 Canvas 上下文的内容仅在您调用“提交”操作(例如描边/填充)时才会更改，并且此后立即可用。