HTML5 Canvas - alpha 值较低的 strip ？

Question

简介

我目前正在开发一个类似于 MugTug 的小型绘图应用程序 Sketchpad 。不过，有一个非常烦人的问题我还没有解决。

绘图算法

我的基本绘制算法与 MugTug 使用的算法类似。基本上它只是在用户绘图时使用drawImage 来标记图像。有一个严重的障碍。由于 alpha 较低，算法开始失败。

您可以通过以下方式设置画笔设置，在 MugTug 工具中轻松看到这一点:直径 -> 100，硬度 -> 1，流量 -> 100，不透明度 -> 2(1 太小!应用程序中的错误？)。

有两个主要问题: 1. 可见 strip 。 2. 颜色偏移(尝试不同的颜色来看看它是如何工作的......)

问题

该问题是否与颜色精度有关？在我看来，Canvas API 使用 8 位 channel (即 0-255)处理颜色。有什么办法可以绕过这个限制吗？如果可能的话，我更愿意使用纯浮点颜色 (0.0-1.0)。

欢迎任何有关如何处理此问题的想法。如果颜色确实仅限于 8 位 channel ，我想我运气不好......

Answer 1

这个问题似乎完全是由于颜色精度造成的。我认为大多数 Canvas API 实现都使用 8 位 RGBA channel 。 1% 或 2% 的不透明度意味着您在图像上应用了非常少量的颜色，只有大约 2-5 级的差异 - 因此即使在多次重复应用画笔之后，您使用的任何颜色最终都会被量化为较小的数字。

您可以制作自己的浮点 Canvas ，并在每次更改后将其复制到普通 Canvas 中。这将使大多数操作完全察觉不到该问题。您必须实现自己的绘图操作(如果您只使用drawImage，这还不算太糟糕)，并且它们可能比 Canvas 操作慢。