fillRect（0,0,0,1）和clearRect（）之间有什么区别

Question

之间有什么区别：

ctx.fillStyle = "rgba(0, 0, 0, 1)";
ctx.fillRect(0, 0, 100, 100)

和

ctx.clearRect(0, 0, 100, 100)

性能或产生的图像或画布数据有何不同？

Answer 1

（已更新以对应有问题的OP更改：） fillRect() ctx.fillStyle = "rgba(0, 0, 0, 1)";将使用不透明像素填充区域，在本例中为黑色（注意alpha是标准化的值[0,1]）。

clearRect()做相反的事情，＆＃34; 清算＆＃34;所有像素使位图变得透明（技术上该区域用黑色透明像素填充）。

clearRect()已优化，fillRect()绑定到合成/混合规则（Porter-Duff），因此前者更快。这意味着clearRect可以仅根据当前转换直接填充区域，而fillRect 具有来完成合成/混合公式，无论是否设置为（globalCompositeOperation）。

这当然是理论上的 - 它取决于浏览器的实现。这是一个 simple performance test ，表明在Chrome中填充比清除更快（我不确定现在Chrome和画布上发生了什么），但在Firefox中，清除速度比填充快很多倍，两者都明显快于Chrome：

在支持上下文不透明标志的浏览器中，如果你不需要它，你可以禁用alpha，使画布响应更快（这里的alpha与元素本身混合，组合与浏览器背景） ）。您将看到特别是Opera浏览器的速度提升，但Firefox和Chrome也支持此标志。要禁用alpha：

var ctx = canvas.getContext("2d", {alpha: false});