制作透明径向渐变时遇到问题（JavaScript/HTML）

Question

背景： 我正在尝试使用光线投射制作光源，玩家可以在随机生成的迷宫中使用该光源。从鼠标指针投射的光线。我使用的径向渐变将它们的颜色从白色（光）更改为黑色（以模拟黑暗）。

问题： 我遇到的问题是

ctx.createRadialGradient()

并没有使线条透明，而只是纯白色，并且我无法通过白色的透明度看到其他笔划线。

目标： 我希望当线条的渐变为黑色时玩家无法看到其他

ctx.stroke()

线，但是当线条的渐变仍然是透明白色时，我希望能够实际看到其他

ctx.stroke()

线.

值得注意：正好有 1,000 条光线被投射来创建一个圆（使用光线）。

代码：

const x = this.rays[i].x
const y = this.rays[i].y
const color0 = this.rays[i].radialGradient.colorStop0 // this color is white;
const color1 = this.rays[i].radialGradient.colorStop1 // this color is black;
const radius = this.circularRayRadius // the radius is equal to 200;
gradient = this.ctx.createRadialGradient(x, y, 0, x, y, radius);
gradient.addColorStop(0, color0);
gradient.addColorStop(1, color1);

Answer 1

从你发布的那一点来看，我没有看到你在哪里使用 Alpha 通道来创建透明度。

您的评论说颜色是“白色”，但这仅意味着......

rgb(255,255,255)       <-- solid white

虽然我期待更多的东西......

rgba(255,255,255,128)  <-- 50% transparent white

rgba(255,255,255,64)   <-- 25% transparent white

但无论如何，我怀疑你会从径向渐变中获得令人印象深刻的结果，更不用说缓慢的速度了。

要创建“光源”，我认为你应该研究一下我使用的SVG过滤器“SpecularLighting”

在我的图像处理程序中成功地在图像上创建了一些非常壮观的效果，但当然它不仅限于图像。

Svg 过滤器非常快速且非常有效，因此请特别研究这个过滤器，根据您的描述，我确信它更适合您的需求：

<svg
  height="200"
  width="200"
  viewBox="0 0 220 220"
  xmlns="http://www.w3.org/2000/svg">
  <filter id="filter">
    <feSpecularLighting
      result="specOut"
      specularExponent="20"
      lighting-color="#bbbbbb">
      <fePointLight x="50" y="75" z="200" />
    </feSpecularLighting>
    <feComposite
      in="SourceGraphic"
      in2="specOut"
      operator="arithmetic"
      k1="0"
      k2="1"
      k3="1"
      k4="0" />
  </filter>
  <circle cx="110" cy="110" r="100" style="filter:url(#filter)" />
</svg>

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feSpecularLighting