Question

context.shadowBlur是如何定义的？似乎它与线宽有一些东西：

var c=document.getElementById("myCanvas1");
var ctx=c.getContext("2d");
ctx.shadowBlur=20;
ctx.shadowColor="black";
ctx.strokeStyle="red";
ctx.strokeRect(20,20,100,80); 

var c=document.getElementById("myCanvas2");
var ctx=c.getContext("2d");
ctx.lineWidth=5;
ctx.shadowBlur=20;
ctx.shadowColor="black";
ctx.strokeStyle="blue";
ctx.strokeRect(20,20,100,80);

<canvas id="myCanvas1" width="200" height="200"></canvas>

<canvas id="myCanvas2" width="200" height="200"></canvas>

我想只绘制阴影，但没有Line和a得不到关系，文档也没有解释它的价值。

Answer 1

可以在此处找到确切的定义：https://html.spec.whatwg.org/multipage/canvas.html#shadows

Shadows are only drawn if the opacity component of the alpha component of the color of shadowColor is nonzero and either the shadowBlur is nonzero, or the shadowOffsetX is nonzero, or the shadowOffsetY is nonzero.

When shadows are drawn, they must be rendered as follows:

    Let A be an infinite transparent black bitmap on which the source image for which a shadow is being created has been rendered.

    Let B be an infinite transparent black bitmap, with a coordinate space and an origin identical to A.

    Copy the alpha channel of A to B, offset by shadowOffsetX in the positive x direction, and shadowOffsetY in the positive y direction.

    If shadowBlur is greater than 0:

        Let σ be half the value of shadowBlur.

        Perform a 2D Gaussian Blur on B, using σ as the standard deviation.

    User agents may limit values of σ to an implementation-specific maximum value to avoid exceeding hardware limitations during the Gaussian blur operation.

    Set the red, green, and blue components of every pixel in B to the red, green, and blue components (respectively) of the color of shadowColor.

    Multiply the alpha component of every pixel in B by the alpha component of the color of shadowColor.

    The shadow is in the bitmap B, and is rendered as part of the drawing model described below.

If the current composition operation is copy, then shadows effectively won't render (since the shape will overwrite the shadow).

context.shadowBlur是如何定义的

1 个答案: