亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

水車_ · 更新于 2021-02-23

陰影效果

1. 前言

canvas 中繪制陰影效果主要靠四個屬性控制，它們分別是：shadowOffsetX，shadowOffsetY，shadowBlur，shadowColor，本小節主要學習這四個屬性。

2. 什么是陰影？

對 css 有了解的同學都知道，通過 box-shadow 屬性可以設置一個標簽的陰影效果。

我們看一個陰影的效果圖：

上面圖片中，左側圖片沒有陰影效果，右側圖片有陰影效果。

陰影就相當于我們的影子，陰影的形狀、大小都是由主體圖形決定的。如果主體是一個矩形，那它的陰影就是一個等大的矩形，主體如果是一個圓形，那它的陰影就是一個同樣的圓形。

3. canvas 設置陰影效果

在 canvas 中，其實所有的圖形默認都是有陰影效果的，只是默認的陰影被主體完全遮擋，并且默認的陰影顏色為透明。

先看一個案例：

實例演示
預覽 復制
復制成功！
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>慕課網Wiki</title>
    <style>
        #imooc{
            border:1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="imooc">您的瀏覽器不支持 HTML5 canvas 標簽</canvas>
    <script>
		const canvas = document.getElementById('imooc');
		canvas.width=300
		canvas.height=200
		const ctx = canvas.getContext('2d');

		ctx.rect(40,40,100,100)
		ctx.fillStyle = "#456795"
		
		// 設置陰影效果
		ctx.shadowOffsetX = 10;  
		ctx.shadowOffsetY = 10;
		ctx.shadowColor = "#ccc";
		ctx.shadowBlur = 4;
		
		ctx.fill();
		
	</script>
<body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

本案例中，我們繪制了一個 100 * 100 的矩形，并且給畫布的四個陰影屬性分別重新賦值。

我們將上面例子中設置陰影效果代碼拆分講解：

  1. 設置水平偏移量，我們設置陰影向水平正方向偏移10像素，也就是向右偏移10像素，如果想要向左偏移，則設定為 -10 即可，默認偏移值為 0。

    ctx.shadowOffsetX = 10;

  2. 設置垂直偏移量，我們設置陰影向垂直正方向偏移10像素，也就是向下偏移10像素，如果想要向上偏移，則設定值為 -10 即可，默認偏移值為 0。

    ctx.shadowOffsetY = 10;

  3. 設置陰影的顏色，這里我們設置陰影的顏色為灰色。

    ctx.shadowColor = "#ccc";

  4. 設置陰影的模糊程度，這里我們設置了4個像素的模糊程度。

    ctx.shadowBlur = 4;

    這里的模糊值會擴大原本陰影的大小。舉例說明：當我們沒有設置模糊程度時，陰影是一個 100 * 100 的灰色矩形，當我們設置模糊程度為 4 時，當前陰影就變成了一個 108 * 108 的灰色矩形。陰影的上、下、左、右都會向外擴充4個像素，這4個像素會以設定的陰影顏色從內向外漸變為透明。

運行結果：

注意事項

陰影屬性的設置屬于全局屬性，會影響到后面繪制的所有圖形，如果只是想要某個圖形有陰影效果，則設置完陰影效果后，需要再將這些屬性設置為默認值。

看一個案例：

實例演示
預覽 復制
復制成功！
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>慕課網Wiki</title>
    <style>
        #imooc{
            border:1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="imooc">您的瀏覽器不支持 HTML5 canvas 標簽</canvas>
    <script>
		const canvas = document.getElementById('imooc');
		canvas.width=300
		canvas.height=100
		const ctx = canvas.getContext('2d');

		ctx.rect(20,20,50,50)
		ctx.fillStyle = "#456795"
		
		// 設置陰影效果
		ctx.shadowOffsetX = 10;  
		ctx.shadowOffsetY = 10;
		ctx.shadowColor = "#ccc";
		ctx.shadowBlur = 4;
		ctx.fill();
		
		// 恢復默認陰影效果
		ctx.shadowOffsetX = 0;  
		ctx.shadowOffsetY = 0;
		ctx.shadowBlur = 0;
		
		ctx.fillStyle="yellow"
		ctx.fillRect(100,20, 50, 50)
		
	</script>
運行案例 點擊 "運行案例" 可查看在線運行效果

運行結果：

我們可以看到，黃色的正方形就沒有了陰影效果。同學們可以把恢復默認值代碼注釋掉后，再看效果。

4. 屬性整理

本小節中我們使用到4個新的屬性，它們分別是 shadowOffsetX，shadowOffsetY， shadowBlur 和 shadowColor。

4.1 shadowOffsetX 屬性

shadowOffsetX 屬性作用是設置水平偏移量，可以為負數，負數值向左偏移。

變量說明：

屬性名 類型 說明
shadowOffsetX Number 設置陰影在 X 軸方向的偏移量，負值表示向左偏移，正值表示向右偏移，默認為0。

4.2 shadowOffsetY 屬性

shadowOffsetY 屬性作用是設置垂直偏移量，可以為負數，負數值向上偏移。
變量說明：

屬性名 類型 說明
shadowOffsetY Number 設置陰影在 Y 軸方向的偏移量，負值表示向上偏移，正值表示向下偏移，默認為0。

4.3 shadowBlur 屬性

shadowBlur 屬性作用是設置陰影的模糊程度。

變量說明：

屬性名 類型 說明
shadowBlur Number 設置陰影的模糊程度，默認為0。

4.4 shadowColor 屬性

shadowColor 屬性作用是設置陰影顏色。

變量說明：

屬性名 類型 說明
shadowColor CSS 顏色值 標準的 CSS 顏色值，用于設定陰影顏色效果，默認是全透明的黑色。

5. 總結

本小節我們主要學習了利用4個陰影屬性給圖形設置陰影效果，需要注意的是設置的陰影效果屬于全局作用，會影響到后面繪制的圖形。