如何仅在一侧设置画布矩形阴影？

Question

我只希望在矩形的底部有一个阴影，而在其他3个侧面没有阴影。要有阴影，我用这个

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.shadowBlur = 20;
ctx.shadowColor = "black";
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 100, 80);

如何仅在矩形的一侧上应用阴影？

Answer 1

您可以添加shadowOffset属性。例如：

ctx.shadowOffsetX = 25;