移除HTML画布的alpha通道

Question

我有一个很大的html画布元素，覆盖着一个纯色背景。我认为，当滚动/平移时，如果浏览器不将画布混合到其后面的元素中（在这种情况下是纯色），可以节省大量cpu。

是否可以删除画布的alpha通道？这应该由浏览器检测并进行优化吗？或者速度提升微不足道？

- marshallpenguin

Answer 1

MDN 建议 在画布上下文中设置 alpha 选项：

如果您的应用程序使用 canvas，并且不需要透明背景，请在使用 HTMLCanvasElement.getContext() 创建绘图上下文时将 alpha 选项设置为 false。浏览器可以在内部使用此信息来优化渲染。

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

- angleKH

Answer 2

没错，只需放置一个没有透明度的矩形 :)

var context = document.getElementById("id of your canvas").getContext("2d");

context.fillStyle = "rgba(0, 0, 0, 1)"; // (red, green, blue, alpha from 0 to 255);

// or just

context.fillStyle = "rgb(0, 0, 0)"; // without alpha
context.fillRect(0, 0, your_canvas_width, your_canvas_height);

- canvas