在 HTML5 中，我們除了上一節講過的可以對圖形設置平移、旋轉、縮放，還可以給圖形添加陰影效果。添加陰影的時候只需要利用圖形上下文對象的幾個關于陰影繪制的屬性就可以實現啦。

圖形陰影繪制的屬性

屬性

描述shadowOffsetX

陰影的橫向位移量

shadowOffsetY

陰影的縱向位移量

shadowBlur

陰影的模糊范圍

shadowColor

陰影的顏色

shadowOffsetX 屬性和 shadowOffsetY 屬性分別用于設置陰影在 X 軸和 Y 軸的延伸距離，屬性值為正值表示向下或向右延伸，負值表示向上或向左延伸。

shadowBlur 屬性用于設置陰影的模糊度，當我們不希望圖形的陰影太清晰時，可以使用這個屬性。屬性值為必須為正值，否則無效喲，一般設定在 0到10 之間。

shadowColor 屬性值用于設置陰影的顏色，屬性值可以為任意標準的 CSS 顏色值，默認顏色為黑色。

給圖形繪制陰影

例如給一個粉色的矩形繪制陰影。

示例：

繪制向右偏移 10 像素的陰影：

HTML5學習(9xkd.com)

var can = document.getElementById("mycanvas");

var ctx = can.getContext("2d");

ctx.shadowOffsetX = 10;

ctx.shadowBlur = 10;

ctx.shadowColor="#000";

ctx.fillStyle = "pink"; // 填充顏色

ctx.fillRect(50, 50, 150, 70);

在瀏覽器中的演示效果：

可以看到上圖中，陰影的位置向右偏移，如果想要陰影向左偏移，可以將shadowOffsetX 的值設置為負數。

示例：

如果要繪制向上偏移 20 像素的陰影，則不需要設置 shadowOffsetX，而是設置 shadowOffsetY 屬性，正值為向下偏移，負值為向上偏移：

var can = document.getElementById("mycanvas");

var ctx = can.getContext("2d");

ctx.shadowOffsetY = -20;

ctx.shadowBlur = 10;

ctx.shadowColor="rgba(0, 0, 0, 0.7)"; // 設置透明度

ctx.fillStyle = "pink"; // 填充顏色

ctx.fillRect(50, 50, 150, 70);

在瀏覽器中的演示效果：

可以看到這張截圖中，矩形的陰影顏色要比上面示例中淡一點。這是因為我們在給陰影設置顏色時，指定了一個透明度，用到了 rgba() 函數，函數中第四個參數用于設置透明度，值為 0~1 之間的小數，0表示完全透明，1表示不透明。

示例：

給四個邊設置陰影：

var can = document.getElementById("mycanvas");

var ctx = can.getContext("2d");

ctx.shadowBlur = 10;

ctx.shadowColor="rgba(0, 0, 0, 0.7)"; // 設置透明度

ctx.fillStyle = "pink"; // 填充顏色

ctx.fillRect(50, 50, 150, 70);

在瀏覽器中的演示效果：

在實際應用中，其實我們會經常用到陰影，例如給導航欄添加陰影、給按鈕添加陰影、給圖片添加陰影等，這樣看上去就會更立體一些，增加層次感。

來源：oschina

鏈接：https://my.oschina.net/u/4072026/blog/4375356

總結

以上是生活随笔為你收集整理的如何用html绘制阴影图形,HTML5 给图形绘制阴影的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。