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

您可以在带有CSS过滤器的上下文中使用合成+新的filter属性，在本例中为blur。

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

这里我们沿着由长度和角度，迭代次数表示的线渲染圆形，其中每次迭代增加模糊半径。阴影的强度由颜色和不透明度决定。

如果浏览器中没有filter属性，则可以将其替换为手动模糊（有许多内容，例如StackBoxBlur和我自己的rtblur），或者只是使用径向渐变。

为了多次使用和提高速度，“缓存”或渲染到离屏画布，并在完成复合后返回到主画布。这将要求您根据最大模糊半径和初始半径计算大小，然后将其渲染为角度0°居中。要使用基于阴影开始变换的局部变换来绘制使用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：

，则会生成结果

result

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>

创建渐变路径填充JavaScript

1 个答案:

演示