带3D效果边框的画布矩形

Question

（参考图片） 图像的第一部分显示带有凸起边框的div（使用-webkit-box-shadow，box-shadow属性）。我想对使用HTML5 canvas元素绘制的矩形给出相同的效果。 有什么方法可以解决这个问题吗？

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

<强> Working Example