Question

我有一个非常大的html画布元素，覆盖了坚实的背景。如果浏览器没有将画布混合到它后面的元素（在这种情况下，是纯色），我会假设在滚动/平移时可以保存很多cpu。

是否可以删除画布Alpha通道？这应该由浏览器来检测和优化吗？或者速度增益是微不足道的？

Answer 1

是的，只需放一个没有alpha的矩形：）

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

Answer 2

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

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

HTMLCanvasElement.getContext()

删除HTML画布Alpha通道

2 个答案: