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

性能或生成的图像或 Canvas 数据有任何差异吗？

Answer 1

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

clearRect() 做相反的事情，“清除”所有像素，使位图变得透明(从技术上讲，该区域被黑色透明像素填充)。

clearRect() 已优化，而 fillRect() 绑定(bind)到合成/混合规则 (Porter-Duff)，因此前者更快。这意味着 clearRect 可以仅根据当前转换自由地直接填充区域，而 fillRect 必须另外通过设置为 (globalCompositeOperation) 的合成/混合公式。

这当然是理论上的——这将取决于浏览器的实现。这是一个 simple performance test 显示在 Chrome 中填充比清除快(我不确定现在 Chrome 和 Canvas 发生了什么)，但在 Firefox 中清除比填充快很多倍，两者都比 Chrome 快得多:

在支持上下文不透明度标志的浏览器中，如果不需要，可以禁用 alpha，以使 Canvas 响应更快(这里的 alpha 与元素本身混合并与浏览器背景合成)。您会看到速度的提高，尤其是 Opera 浏览器，而且 Firefox 和 Chrome 也支持此标志。禁用阿尔法:

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