HTML5 画布图像数据不正确的 rgb 值

HTML5 Canvas ImageData incorrect rgb values

本文关键字：不正确 数据 rgb 图像 布图像 HTML5      更新时间：2023-09-26

我正在为绘图应用程序开发油漆桶工具。

我正在使用context.getImageData来找出画布中所有像素的颜色值。

但是，似乎默认情况下所有 rgba 值均为 0，即使画布默认为白色。现在，我的油漆桶工具不适用于用黑色勾勒的形状，因为黑色具有 rgb 0,0,0，默认画布图像数据也是如此，即使画布是白色的。

所以我的问题是我是否可以更改默认图像数据，使其反映画布的实际默认颜色（白色或255,255,255），或者如何快速将画布清除为该颜色。我认为可能但效率极低的解决方案是在清除画布时将每个像素的值设置为 255。但是，由于画布的大小，这会导致执行时出现几秒钟的滞后。

还有其他我忽略的替代方案吗？谢谢。

空画布初始化为rgba(0,0,0,0)（即透明）

如果您希望将所有内容初始化为白色，请运行如下操作。

ctx.fillStyle = '#FFFFFF'; // or 'rgba(255,255,255,1)'
ctx.fillRect(0,0,canvas.width, canvas.height);

作为规范中的参考，它说：

初始化画布时，必须将其位图清除为透明黑色。

相关文章：