Question

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

box-shadow：0 1px 2px 0 rgba（0,0,0,0.15）

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

如果我查看shadowBlur规范，它明显与像素无关，但它只是说＆＃34;它是高斯模糊效果的参数＆＃34; （意译）。实际上，我觉得这个指定不足。

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

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);

Answer 2

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

BTW值应该是合格的。我已经添加了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;

将box-shadow解释为canvas shadowXXX选项

2 个答案: