html - キャンバスの四角形と 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();

実施例