我必须在画布(2d)中画一个弓形物体。该框具有指定为css定义的外部阴影
box-shadow:0 1px 2px 0 rgba(0,0,0,0.15)
我不知道如何使用shadowOffsetX / Y,shadowColor和shadowBlur将其转换为定义阴影的画布方式。
如果我查看shadowBlur规范,它明显与像素无关,但它只是说"它是高斯模糊效果的参数" (意译)。实际上,我觉得这个指定不足。
使用渐变来更好地近似透明吗?但是它不会错过模糊效果吗?
答案 0 :(得分: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);
答案 1 :(得分:0)
阴影模糊以像素为单位,仅支持像素尺寸。模糊为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;