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)

是否会有任何性能差异或生成的图像或画布数据不同？

- exebook

---

Alpha通道仅具有0到1的值，而不是255。 - Bergi

从文档中得知： "clearRect() […] 将矩形内的所有像素设置为透明黑色。" - Bergi

Answer 1

(已更新以对应问题中的更改:) 使用 ctx.fillStyle = "rgba(0, 0, 0, 1)"; 的 fillRect() 将会使用不透明像素填充区域，即在此情况下是黑色（请注意，alpha 是一个标准化值 [0,1]）。

相反，clearRect()“清除”所有像素，使位图变为透明（技术上讲，该区域被填充为黑色透明像素）。 clearRect() 被优化过，而 fillRect() 受到合成/混合规则（Porter-Duff）的限制，因此前者更快。这意味着 clearRect 只能基于当前转换直接填充区域，而 fillRect 还必须按照设置的合成/混合公式（globalCompositeOperation）进行计算。

当然，这只是理论上的情况 - 实际效果取决于浏览器的实现。这里有一个简单的性能测试，显示在Chrome中填充速度比清除速度快（我不确定Chrome和画布当前的情况），但在Firefox中清除速度比填充速度快得多，两者都比Chrome显著地更快：

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

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

- user1693593

---

所以 fillStyle 0,0,0,1 更接近于 clearRect 的功能？ - exebook

@exebook 颜色方面是的（0,0,0,0），性能方面不行。颜色并不像合成那样重要。clearRect可以直接“清除”。fillRect必须经过更昂贵的合成/混合处理。 - user1693593

好的，所以fillStyle=0,0,0,0+fillRect与clearRect相同，但速度要慢得多！ - exebook

@exebook 取决于浏览器，Chrome在后期版本中存在一些“问题”，其中填充速度比清除速度更快（对于Chrome而言，它曾经相反，我确信他们将来会解决这个问题），但正如您所看到的，Firefox用clear比fill快得多（您不能使用0 alpha ref. fillRect颜色技术上清除任何内容（但是comp模式可以改变这一点），但这是使用clearRect的结果）。 - user1693593

Chrome 65.0.3325更新 - clearRect速度提升了大约10-12％。 - dtasev