css - 将 box-shadow 解释为 canvas ShadowXXX 选项

Question

我必须在 Canvas (2d)中绘制一个弓对象。该框具有指定为 css 定义的外部阴影

盒子阴影:0 1px 2px 0 rgba(0, 0, 0, 0.15)

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

如果我看一下shadowBlur规范，它显然与像素无关，但它只说“它是高斯模糊效果的参数”(释义)。事实上，我觉得这个规定不够明确。

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

Answer 1

现在有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);