HTML5 Canvas - 带低 alpha 的条带？

Question

简介

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

绘图算法

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

您可以通过以下方式在 MugTug 的工具中轻松看到这一点：直径 -> 100，硬度 -> 1，流量 -> 100，不透明度 -> 2（1 太小！应用程序中的错误?)。

有两个主要问题： 1. 可见条带。 2. 颜色变化（尝试不同的颜色，看看它是如何工作的......）

问题

这个问题可能与颜色精度有关吗？在我看来，Canvas API 使用 8 位通道（即 0-255）处理颜色。有没有办法绕过这个限制？如果可能的话，我更喜欢使用纯浮点颜色 (0.0-1.0)。

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

Answer 1

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

您可以制作自己的浮点画布，并在每次更改后将其复制到普通画布中。对于大多数操作来说，这将使问题完全不明显。您必须实现自己的绘图操作（如果您只使用 drawImage 也不会太糟糕），而且它们可能比画布操作要慢。

Answer 2

您是否在 MugTug 的 Sketchpad 上看到过类似的问题？ 我尝试在橙色背景上使用 4% alpha 蓝色笔刷，并且有条纹等。 如果它比你的代码做得更好，那么你做错了什么。

我一直看到画布使用 32 位图形（颜色 24 + alpha 8），所以我怀疑这可以解决。