HTML5 Canvas - 低alpha的条带?

时间:2011-01-24 12:12:23

标签: html5 canvas drawing gradient html5-canvas

简介

我目前正在开发一个类似于MugTug Sketchpad的小型绘图应用程序。然而,有一个令人讨厌的问题我还没有成功解决。

绘图算法

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

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

主要有两个问题:1。可见条带。 2.颜色变化(给出不同的颜色,看看它是如何工作的......)

问题

这个问题可能与色彩精确度有关吗?在我看来,Canvas API使用8位通道(即0-255)处理颜色。这种限制有什么办法吗?如果可能的话,我宁愿使用纯浮色(0.0-1.0)。

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

2 个答案:

答案 0 :(得分:2)

这个问题似乎完全是由于色彩精确度。我认为大多数Canvas API实现都使用8位RGBA通道。 1%或2%的不透明度意味着您在图像上应用了非常少量的颜色,只有大约2-5级的差异 - 所以即使经过大量重复应用的刷子,您使用的任何颜色最终都会被量化到较小的数字。

您可以制作自己的浮点画布,并在每次更改后将其复制到普通画布中。这将使问题对大多数操作完全不明显。你必须实现自己的绘图操作(如果你只使用drawImage,那就太糟了),它们可能比画布慢。

答案 1 :(得分:1)

你在MugTug的Sketchpad上看到类似的问题吗? 我尝试用橙色背景上的4%阿尔法蓝色刷子,并且有绑带等。 如果它比你的代码更好,那么你做错了。

我一直看到画布使用32位图形(24为彩色+ 8为alpha)所以我怀疑这可以解决。