Css 将框阴影解释为画布阴影XXX选项

我必须在画布上画一个弓形物体（2d）。该框具有指定为css定义的外部阴影

长方体阴影：0 1px 2px 0 rgba（0,0,0,0.15）

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

如果我看一下阴影模糊规范，它显然与像素无关，但它只说“这是高斯模糊效果的一个参数”（意译）。事实上，我发现这是不够明确的

---

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

阴影模糊以像素为单位，只支持像素尺寸。模糊值为0表示锐利边缘，1表示一个像素的模糊值，2表示两个像素的模糊值，依此类推。它不受2d API转换的影响。canvas 2D API不支持阴影扩散

顺便说一句，数值应该是合格的。我添加了px，您在CSS中忘记了它们

所以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;

现在有一些类似于CSS过滤器属性并接受相同函数的。虽然它仍然是一种实验技术

//创建画布
const canvas=document.createElement（“canvas”）；
画布宽度=500；
高度=500；
//设置上下文
const context=canvas.getContext（“2d”）；
context.fillStyle='#ff0'；
rect（50,50100100）；
//设置阴影过滤器
让offsetX=20；
设offsetY=0；
半径取5；
让颜色='rgba（255,0,0,0.8）'；
context.filter='drop shadow（'+offsetX+'px'+offsetY+'px'+blurRadius+'px'+color+'）；
context.fill（）；
document.body.appendChild（画布）