2

我正在尝试为绘制的圆圈制作动画 - 这是我正在做的简化版本:

http://jsfiddle.net/DQz37/1/

问题是:我在每个线段之间都有轻微的线条/失真。像这样:

段之间的间隙

我正在处理的限制是:

  • 我需要在同一个画布上渲染多个圆圈,有时圆圈重叠
  • 我需要使用透明度/ rgba 着色来渲染圆圈
  • 我需要对圆圈的渲染进行动画处理(所以它们看起来像是被绘制的)

这是一个常见问题吗?你如何处理这种事情?

4

2 回答 2

6

解决此问题的一种简单方法是始终绘制一条路径,这样您就可以保证它们连接良好。

因此,不是从 A 到 B,然后 B 到 C,然后 C 到 D,而是从 A 到 B,清除画布,从 A 到 C,清除画布,从 A 到 D 等。

下面以修改后的代码位为例:

http://jsfiddle.net/ZV7rv/


编辑:作为对评论的回应,这是如何在使用画布缓冲区保持与之前画布相同的状态时实现相同的目标:

http://jsfiddle.net/7vVBC/

于 2012-05-28T02:37:56.133 回答
0

基本上,您想组合两条路径并将它们完美地连接起来,没有任何接缝,但这不会起作用,或者如果您真的很幸运并且它可以在一个浏览器中运行,那么它可能无法在另一个浏览器中运行。这是因为抗锯齿算法的实现并不完全相同,甚至可能是硬件加速并传递给显卡。

提示:不能禁用 antialiasing

作为一名程序员,你不断地遇到各种不容易做或不方便的问题,这时你需要退后一步,重新评估你的选择。这是其中之一。

在您指定的约束中,您唯一的选择是重绘每一帧上的所有内容,或者不使用 alpha,并稍微重叠段以确保由于抗锯齿而没有空格。

于 2012-05-28T14:37:50.587 回答