javascript - 创建渐变路径填充 JavaScript

Question

我最近一直在为一个项目添加阴影。我最终得到了我喜欢的东西，但阴影始终是纯透明的颜色。我希望它们在更远的地方成为渐变渐变。

---

我目前拥有的:

我想达到的目标:

---

现在我正在使用路径在 2D Canvas 上绘制阴影。当前的代码如下:

// Check if edge is invisible from the perspective of origin
var a = points[points.length - 1];
for (var i = 0; i < points.length; ++i, a = b)
{
    var b = points[i];

    var originToA = _vec2(origin, a);
    var normalAtoB = _normal(a, b);
    var normalDotOriginToA = _dot(normalAtoB, originToA);

    // If the edge is invisible from the perspective of origin it casts
    // a shadow.
    if (normalDotOriginToA < 0)
    {
        // dot(a, b) == cos(phi) * |a| * |b|
        // thus, dot(a, b) < 0 => cos(phi) < 0 => 90° < phi < 270°

        var originToB = _vec2(origin, b);

        ctx.beginPath();
        ctx.moveTo(a.x, a.y);
        ctx.lineTo(a.x + scale * originToA.x,
                   a.y + scale * originToA.y);
        ctx.lineTo(b.x + scale * originToB.x,
                   b.y + scale * originToB.y);
        ctx.lineTo(b.x, b.y);
        ctx.closePath();

        ctx.globalAlpha = _shadowIntensity / 2;
        ctx.fillStyle = 'black';
        ctx.fillRect(_innerX, _innerY, _innerWidth, _innerHeight);
        ctx.globalAlpha = _shadowIntensity;
        ctx.fill();
        ctx.globalAlpha = 1;

    }
}

关于我如何实现这一目标的建议？非常感谢任何帮助。

Answer 1

您可以使用组合 + 新的 filter采用 CSS 过滤器的上下文属性，在本例中为模糊。

您必须分几步完成 - 通常这属于 3D 域，但我们也可以通过渲染阴影贴图在 2D 中“伪造”它。

在这里，我们沿着由长度和 Angular 、迭代次数表示的直线渲染一个圆形，其中每次迭代都会增加模糊半径。阴影的强度由其颜色和不透明度定义。

如果 filter 属性在浏览器中不可用，可以用手动模糊替换它(那里有很多，例如 StackBoxBlur 和我自己的 rtblur )，或者简单地使用径向渐变。

为了多次使用和提高速度，“缓存”或渲染到屏幕外 Canvas ，完成后合成回主 Canvas 。这将需要您根据最大模糊半径和初始半径计算大小，然后以 0° Angular 为中心渲染它。要绘制，请使用 drawImage() 和基于阴影开始的局部变换，然后旋转和缩放(下面未显示，因为有点太宽泛)。

在下面的示例中，假设主要对象在渲染阴影后绘制在顶部。

main 函数接受以下参数:

renderShadow(ctx, x, y, radius, angle, length, blur, iterations)

// ctx - context to use
// x/y - start of shadow
// radius - shadow radius (assuming circle shaped)
// angle - angle in radians. 0° = right
// length - core-length in pixels (radius/blur adds to real length)
// blur - blur radius in pixels. End blur is radius * iterations
// iterations - line "resolution"/quality, also affects total end blur

尝试调整形状、阴影颜色、模糊半径等，为您的场景找到最佳结果。

演示

如果浏览器支持filter，结果:

var ctx = c.getContext("2d");

// render shadow
renderShadow(ctx, 30, 30, 30, Math.PI*0.25, 300, 2.5, 20);

// show main shape
ctx.beginPath();
ctx.moveTo(60, 30);
ctx.arc(30, 30, 30, 0, 6.28);
ctx.fillStyle = "rgb(0,140,200)";
ctx.fill();

function renderShadow(ctx, x, y, radius, angle, length, blur, iterations) {

  var step = length / iterations,         // calc number of steps
      stepX = step * Math.cos(angle),     // calc angle step for x based on steps
      stepY = step * Math.sin(angle);     // calc angle step for y based on steps
  
  for(var i = iterations; i > 0; i--) {   // run number of iterations
    ctx.beginPath();                      // create some shape, here circle
    ctx.moveTo(x + radius + i * stepX, y + i * stepY); // move to x/y based on step*ite.
    ctx.arc(x + i * stepX, y + i * stepY, radius, 0, 6.28);
 
    ctx.filter = "blur(" + (blur * i) + "px)"; // set filter property
    ctx.fillStyle = "rgba(0,0,0,0.5)";    // shadow color
    ctx.fill();
  }
  
  ctx.filter = "none";                    // reset filter
}

<canvas id=c width=450 height=350></canvas>