有什么区别:
ctx.fillStyle = "rgba(0, 0, 0, 1)";
ctx.fillRect(0, 0, 100, 100)
和
ctx.clearRect(0, 0, 100, 100)
性能或生成的图像或 Canvas 数据有任何差异吗?
最佳答案
(已更新以对应有问题的 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});
关于javascript - fillRect(0,0,0,1) 和 clearRect() 有什么区别,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30830126/