如何获得新的画布弧形描边样式？

Posted 2023-03-05

【中文标题】如何获得新的画布弧形描边样式？

【英文标题】：How do I get new canvas arc stroke styles?

【发布时间】：2012-06-12 20:41:29

【问题描述】：

所以我正在尝试绘制一个简单的色轮，显示红色、绿色和蓝色分量以及它们之间的关系。问题是我的（简单的，1 度的）弧线正在使用后来的弧线，即使我使用的是beginPath() 和closePath()。

我目前的进度是http://meyerweb.com/eric/css/colors/hsl-from-rgb.html。最里面的戒指是该戒指的用途，蓝色渐变为黑色。下一个响铃应该只显示绿色渐变到黑色，第三个响铃应该只有红色渐变到黑色。最外层、最厚的环用于显示色轮周围的全光谱，您可以在细辐条中看到（就像在其他环中一样）。

如果我颠倒画块的顺序，那么最外圈很好，所有内圈都乱了，所以很明显笔画样式正在向前泄漏。我只是不知道如何或为什么，也不知道如何克服这个问题。我是否应该只定义四个单独的对象（例如，ctx1 到 ctx4）并分别绘制到每个对象？

我查看了different fillStyle colors for arc in canvas，但那里的建议似乎对我没有帮助。其他谷歌搜索没有产生任何用处。

【参考方案1】：

RGB 值不能使用小数，需要四舍五入。

http://jsfiddle.net/M6KbD/

【讨论】：

卫生署！我依靠浏览器来处理不正确的值（当我超过 0-255 范围时它们会这样做），这让我很难受。这就是我所追求的解决方案。谢谢！

每当我开始一个新的画布项目时，我都会非常痛苦。

【参考方案2】：

我没有仔细看你的代码，但问题可能不在于画布，它可能是你绘制所有内容的顺序。

你有4套，对吧？您正在从第一组中抽取 1 个，从第二个中抽取 1 个，从第三个中抽取 1 个，从第四个中抽取 1 个，然后从第一个中抽取另一个 ...

如果您更改顺序，一切都会好起来的：

http://jsfiddle.net/muatT/

（懒惰地，我只是照原样复制了整个 for 循环。你可能可以简化很多代码）

【讨论】：

好的，所以你为每个环做了一个单独的循环。这就是我试图避免的，因为它似乎没有必要——只需在循环的每一次通过中的每个环中绘制一个弧段即可。是否有理由需要在不同的循环中绘制它们？

看看安德鲁的小提琴的真正原因，这里是代码 | 0 向下舍入：jsfiddle.net/xhHwe。我建议你把答案归功于他

哇——我以前从未见过| 0 操作。你能指点我一个详细的解释吗？我的意思是，我知道它在这里做了什么，但我想了解它的所有可能性。而且，正如您可能猜到的那样，在 Google 上搜索| 是毫无意义的。

这是按位或运算符。它强制将 lhs 强制转换为（32 位）整数，然后与 rhs 进行按位或运算。与 0 进行或运算是一个恒等函数，因此您得到的只是将 lhs 转换为 32 位整数。

对浮点数取底有多种方法，按位或相当有效。这是我很久以前做的一个测试：jsperf.com/bit-thingies。简而言之，这个技术可以处理高达 2147483647（又名 32 位整数）的数字，如果数字大于这个数字，您将返回垃圾数据。