HTML5 給圖形繪制陰影

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

圖形陰影繪制的屬性

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

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

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

給圖形繪制陰影

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

示例：

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

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>HTML5學(xué)習(xí)(9xkd.com)</title>
        </head>
        <body>
            <canvas id="mycanvas" width="300" height="200" style="border: 1px solid #000;"></canvas>
            <script>
                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);
            </script>
        </body>
    </html>

在瀏覽器中的演示效果：

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

示例：

如果要繪制向上偏移 20 像素的陰影，則不需要設(shè)置 shadowOffsetX，而是設(shè)置 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)"; // 設(shè)置透明度
ctx.fillStyle = "pink";  // 填充顏色
ctx.fillRect(50, 50, 150, 70);

在瀏覽器中的演示效果：

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

示例：

給四個邊設(shè)置陰影：

var can = document.getElementById("mycanvas");
var ctx = can.getContext("2d");
ctx.shadowBlur = 10;
ctx.shadowColor="rgba(0, 0, 0, 0.7)"; // 設(shè)置透明度
ctx.fillStyle = "pink";   // 填充顏色
ctx.fillRect(50, 50, 150, 70);

在瀏覽器中的演示效果：

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

了解更多可查看鏈接：https://www.9xkd.com/

覽圖

首先查看預(yù)覽圖:

多彩方塊

原理

采用了 background 屬性 background: inherit;

inherit 關(guān)鍵字使得元素獲取其父元素的計算值。它可以應(yīng)用于任何 CSS 屬性，包括 CSS 簡寫 all。對于繼承屬性，inherit 關(guān)鍵字只是增強了屬性的默認行為，通常只在覆蓋原有的值的時候使用。繼承始終來自文檔樹中的父元素，即使父元素不是包含塊。

線性漸變 linear-gradient

線性漸變由一個軸 (梯度線) 定義，其上的每個點具有兩種或多種的顏色，且軸上的每個點都具有獨立的顏色。為了構(gòu)建出平滑的漸變，linear-gradient() 函數(shù)構(gòu)建一系列垂直于漸變線的著色線，每一條著色線的顏色則取決于與之垂直相交的漸變線上的色點。

用法：

// 漸變軸從左上角出發(fā)并且呈 45 度。
background: linear-gradient(45deg, red, blue);

偽元素 ::after

CSS偽元素::after用來創(chuàng)建一個偽元素，作為已選中元素的最后一個子元素。通常會配合content屬性來為該元素添加裝飾內(nèi)容。這個虛擬元素默認是行內(nèi)元素。

.content-item::after {
            content: "";
            width: 280px;
            height: 280px;
            /* 獲取其父元素的計算值 */
            background: inherit;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            filter: blur(20px) brightness(80%);
            z-index: -1;
}

濾鏡 filter

在該程序中調(diào)用了2個函數(shù)： blur(20px) brightness(80%);

blur()：將高斯模糊應(yīng)用于輸入圖像。

brightness()：將線性乘法器應(yīng)用于輸入圖像，以調(diào)整其亮度。值為 0% 將創(chuàng)建全黑圖像；值為 100% 會使輸入保持不變，其他值是該效果的線性乘數(shù)。如果值大于 100% 將使圖像更加明亮。

至于代碼中還有其他知識點，也就是 margin 、position 等基礎(chǔ)內(nèi)容了。

全部代碼

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>陰影和背景一致</title>
    <style>
        .content-item {
            position: relative;
            width: 260px;
            height: 260px;
            border-radius: 10px;
            /* background: linear-gradient(90deg, #e66465, #9198e5); */
            background: linear-gradient(217deg, rgba(255, 0, 0, .8), rgba(255, 0, 0, 0) 70.71%),
                linear-gradient(127deg, rgba(0, 255, 0, .8), rgba(0, 255, 0, 0) 70.71%),
                linear-gradient(336deg, rgba(0, 0, 255, .8), rgba(0, 0, 255, 0) 70.71%);
            margin: 100px auto;
        }

        .content-item::after {
            content: "";
            width: 280px;
            height: 280px;
            /* 獲取其父元素的計算值 */
            background: inherit;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            filter: blur(20px) brightness(80%);
            z-index: -1;
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="content-item"></div>
    </div>
</body>

</html>

參考文章

css 設(shè)置盒子陰影，陰影和背景圖保持一致_css filter 陰影色和背景色一致_隨憶~的博客-CSDN博客

歡迎收藏該文章！

言

通常，我們?yōu)閐iv盒子或者圖片設(shè)置陰影使用 box-shadow 屬性，代碼如下：

box-shadow: 10px 10px 10px gray;

問題拋出

使用 box-shadow 屬性給div盒子設(shè)置陰影倒還好，如果用在透明的圖片上，陰影會變成方形的，讓其看起來像添加了一個邊框一樣。

解決方法

我們可以通過css的另一種參數(shù)，為透明png實現(xiàn)基于透明圖片的陰影效果，效果如下圖，左側(cè)是 box-shadow ，右側(cè) drop-shadow 。

drop-shadow()說明：

drop-shadow() 是CSS中用于為圖像或文本添加陰影效果的一個函數(shù)，?它屬于 filter 屬性的一部分。?這個函數(shù)允許你為元素創(chuàng)建陰影，?而不需要考慮元素的形狀或邊界框。?與 box-shadow 不同，?drop-shadow 可以應(yīng)用于非矩形形狀，?如透明的PNG或SVG圖像，?它使用元素的Alpha蒙版來決定陰影的形狀。?這意味著，?即使元素沒有背景，drop-shadow 也能為圖像的非透明部分創(chuàng)建陰影。?

drop-shadow()語法如下：

filter: drop-shadow( offset-x offset-y blur-radius spread-radius color )

drop-shadow()參數(shù)說明如下：

offset-x：該參數(shù)設(shè)置圖像的水平偏移量。正值創(chuàng)建右側(cè)偏移，負值創(chuàng)建左側(cè)偏移。
offset-y：此參數(shù)設(shè)置圖像的垂直偏移量。正值創(chuàng)建到底部的偏移量，負值創(chuàng)建到頂部的偏移量。
blur-radius：設(shè)置模糊半徑的值。它是一個可選參數(shù)。
spread-radius：設(shè)置傳播半徑的值。它是一個可選參數(shù)。
color：設(shè)置投影的顏色。它的可選參數(shù)。

演示代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .img_box .left_img{
      box-shadow: 10px 10px 10px gray;
    }
    .img_box .right_img{
      filter: drop-shadow(2px 4px 8px rgb(225, 170, 170));
    }
  </style>
</head>
<body>

  <div class="img_box">
    <img class="left_img" src="./lihua.png" />
    <img class="right_img" src="./lihua.png" />
  </div>
  
</body>
</html>

總結(jié)

盡管有很好的支持，但 drop-shadow 濾鏡仍然沒有得到充分的利用。我希望這篇文章強調(diào)了一些使用 box-shadow的情況，也許你可以在你的下一個項目中使用它！

在線咨詢

上一篇：HTML5(七)-SVG基礎(chǔ)入門
下一篇：多行文本控件(富文本框)怎樣自動填寫？

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML5 給圖形繪制陰影

圖形陰影繪制的屬性

給圖形繪制陰影

覽圖

原理

全部代碼

參考文章

言

問題拋出

解決方法

演示代碼如下：

總結(jié)

您的項目需求