将 box-shadow 解释为 canvas shadowXXX 选项

Question

我必须在 canvas (2d) 中绘制一个弓对象。该框具有指定为 css definition

的外部阴影

框阴影：0 1px 2px 0 rgba(0, 0, 0, 0.15)

我不知道如何使用 shadowOffsetX/Y、shadowColor 和 shadowBlur 将其转换为 canvas 定义阴影的方式。

如果我查看 shadowBlur 规范，它显然与像素无关，但它只说 "it's a parameter for a gaussian blur effect"（释义）。实际上，我发现这未指定。

使用渐变到透明会更好吗？但是这样不会错过模糊效果吗？

Answer 1

阴影模糊以像素为单位，仅支持像素尺寸。 0的模糊有锐边，1是一个像素的模糊，2是两个像素的模糊等等。它不受二维 API 变换的影响。 canvas 2D API.

不支持阴影扩散

BTW 值应该是合格的。我在 CSS.

中你忘记的地方添加了 px

所以CSS

box-shadow:0px 1px 2px 0px rgba(0, 0, 0, 0.15);

变成

ctx.shadowBlur = 2;
ctx.shadowColor = "rgba(0, 0, 0, 0.15)";
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 1;

Answer 2

现在有 filters 类似于 CSS 过滤器属性并接受相同的功能。虽然还是实验技术

// create canvas
const canvas = document.createElement("canvas");
canvas.width = 500;
canvas.height = 500;

// set context
const context = canvas.getContext("2d");
context.fillStyle = '#ff0';
context.rect(50, 50, 100, 100);

// set shadow filter
let offsetX = 20;
let offsetY = 0;
let blurRadius = 5;
let color = 'rgba(255, 0, 0, 0.8)';
context.filter = 'drop-shadow('+ offsetX + 'px ' + offsetY + 'px ' + blurRadius + 'px ' + color + ')';
context.fill();

document.body.appendChild(canvas);

将 box-shadow 解释为 canvas shadowXXX 选项

Interpret box-shadow as canvas shadowXXX options

css

canvas

shadow