gpt4 book ai didi

javascript - Canvas 锯齿状边缘问题与线条/笔画

转载 作者:行者123 更新时间:2023-11-29 22:25:47 32 4
gpt4 key购买 nike

我在 Canvas 上画线时遇到一点问题,

基本上我希望线条漂亮、柔软且半不透明,但 Canvas 似乎只想对最后渲染的线段执行此操作。

看看这里,您会看到最后绘制的线段很好,而且..我想要它)但是随着动画的播放,之前绘制的线段变得参差不齐。

我注意到,如果我使用 closepath,这不会发生,但是,由于间隔/动画,我不能在每次渲染时都使用它,因为线条到处都是:

http://jsfiddle.net/xSPuM/1/

任何人对如何阻止这种情况发生有任何想法,我将不胜感激。

非常感谢一个

最佳答案

奇怪的代码!动画很简洁,虽然这样做的方式看起来有点独特,所以让我们看一下。

首先要完全清楚,当您创建一条路径时,您可以继续一遍又一遍地抚摸它。

因此,如果您有一条包含三个线段 A、B、C 的路径,并且您这样做:

A,中风,B,中风,C,中风

您将获得 A 段 3 次、B 段 2 次和 C 段 1 次。

这基本上就是您在这里所做的。

您可以通过在路径的末尾仅划一次来轻松避免这种情况:

http://jsfiddle.net/xSPuM/5/

这会停止动画,但会说明问题所在。您可以通过清除屏幕来修复动画。因此,对于分割市场 ABC,我们将执行以下操作:

A、清晰、中风、B、清晰、中风、C、清晰、中风

然后,您将对 A 段进行一次描边,然后清除屏幕,然后对 A-B 段进行一次描边,最后一次清除屏幕,因此对 A-B-C 段进行一次描边。这就是您想要的。

问题在于清除屏幕意味着清除所有之前绘制的形状!看这里:

http://jsfiddle.net/xSPuM/7/

有几种方法可以解决这个问题:

  1. 将当前正在绘制的对象保存在临时 Canvas 上(可能比较棘手)
  2. 将先前绘制的状态保存到临时 Canvas (不那么棘手)
  3. 跟踪这三条路径,就好像它们是一条路径一样(简单易行,所以我会为你做)

要完成#3,我们要做的就是不要在每个新部分的开头调用 beginPath。相反,我们只在开始时调用一次 beginPath,每个新部分都只是一个 moveTo 操作!

http://jsfiddle.net/xSPuM/8/

这应该足以让您走上正确的轨道!

关于javascript - Canvas 锯齿状边缘问题与线条/笔画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9483390/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com