HTML5 Canvas - alpha 值较低的条带？
简介
我目前正在开发一个类似于 MugTug 的 Sketchpad 的小型绘图应用程序。不过，有一个非常烦人的问题我还没有解决。
绘图算法
我的基本绘图算法与 MugTug 使用的算法类似。基本上它只是在用户绘图时使用drawImage 来标记图像。有一个严重的障碍。该算法在 alpha 值较低时开始失败。
您可以通过按以下方式设置画笔设置，在 MugTug 工具中轻松看到这一点：直径 -> 100、硬度-> 1、流程-> 100，不透明度-> 2（1 太小！应用程序中有错误？）。
主要存在两个问题： 1. 可见条带。 2. 颜色偏移（尝试不同的颜色以了解其工作原理...）
问题
该问题是否与颜色精度有关？在我看来，Canvas API 使用 8 位通道（即 0-255）处理颜色。有什么办法可以绕过这个限制吗？如果可能的话，我更愿意使用纯浮点颜色（0.0-1.0）。
欢迎任何有关如何处理此问题的想法。如果颜色确实仅限于 8 位通道，我想我运气不好......
Introduction
I'm currently developing a small drawing application similar to MugTug's Sketchpad. There's one pretty annoying issue I haven't managed to get around yet, though.
Drawing Algorithm
My basic draw algorithm is similar to the one used by MugTug. Basically it just stamps images using drawImage while the user is drawing. There's one serious handicap. The algorithm begins to fail with low alpha.
You can see this easily in the MugTug's tool by setting brush settings in the following way: diameter -> 100, hardness -> 1, flow -> 100, opacity -> 2 (1 is too small! bug in the app?).
There are two main issues: 1. Visible banding. 2. Color shifts (give different colors a go to see how this works...)
Questions
Could the issue have something to do with color precision? It seems to me the Canvas API treats colors using 8 bit channels (ie. 0-255). Is there any way around this limitation? I would prefer to use pure float colors (0.0-1.0) instead if possible.
Any ideas on how to deal with this are welcome. If color is indeed limited to 8 bit channels I guess I'm out of luck...
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
这个问题似乎完全是由于颜色精度造成的。我认为大多数 Canvas API 实现都使用 8 位 RGBA 通道。 1% 或 2% 的不透明度意味着您在图像上应用了非常少量的颜色，只有大约 2-5 级的差异 - 因此即使在多次重复应用画笔之后，您使用的任何颜色最终都会被量化为更小的数字。
您可以制作自己的浮点画布，并在每次更改后将其复制到普通画布中。这将使大多数操作完全察觉不到该问题。您必须实现自己的绘图操作（如果您只使用
drawImage，那还不错），并且它们可能比画布操作慢。This problem seems entirely due to color precision. I think most Canvas API implementations use 8 bit RGBA channels. 1% or 2% opacity means that you are applying a very small amount of color to the image, only about 2-5 levels of difference - so even after a lot of repeated applications of the brush, any colors you use will end up being quantised down to a smaller number.
You could make your own a floating point canvas and copy it into a normal canvas after every change. That will make the problem completely unnoticeable for most operations. You'd have to implement your own drawing operations (not too bad if you only use
drawImage) and they are likely to be slower than the canvas ones.您在 MugTug 的画板上看到类似的问题吗？
我尝试在橙色背景上使用 4% alpha 蓝色画笔，结果出现了条带等现象。
如果它比你的代码做得更好，那么你就做错了。
我总是看到画布使用 32 位图形（24 位颜色 + 8 位 Alpha），所以我怀疑这个问题是否可以解决。
Do you see similar issues on MugTug's Sketchpad?
I tried with a 4% alpha blue brush over an orange background, and there is banding and such.
If it does better than you code then you are doing something wrong.
I've always seen canvas working with 32bit graphics (24 for color + 8 for alpha) so I doubt this can be solved.