html - 具有 3D 效果边框的画布矩形

Question

（参考图片）图片的第一部分显示了带有凸起边框的 div（使用 -webkit-box-shadow,box-shadow 属性）。我想为使用 HTML5 画布元素绘制的矩形提供相同的效果。有什么办法可以实现这个吗？？

Answer 1

这是可能的，尝试这样的事情：

context.rect(50, 50, 100, 100);
context.fillStyle = 'white';
context.shadowColor = 'black';
context.shadowBlur = 25;
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.fill();

工作示例