第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

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

陰影效果

1. 前言

canvas 中繪制陰影效果主要靠四個(gè)屬性控制，它們分別是：shadowOffsetX，shadowOffsetY，shadowBlur，shadowColor，本小節(jié)主要學(xué)習(xí)這四個(gè)屬性。

2. 什么是陰影？

對(duì) css 有了解的同學(xué)都知道，通過 box-shadow 屬性可以設(shè)置一個(gè)標(biāo)簽的陰影效果。

我們看一個(gè)陰影的效果圖：

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

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

3. canvas 設(shè)置陰影效果

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

先看一個(gè)案例：

實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>慕課網(wǎng)Wiki</title>
    <style>
        #imooc{
            border:1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="imooc">您的瀏覽器不支持 HTML5 canvas 標(biāo)簽</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"
		
		// 設(shè)置陰影效果
		ctx.shadowOffsetX = 10;  
		ctx.shadowOffsetY = 10;
		ctx.shadowColor = "#ccc";
		ctx.shadowBlur = 4;
		
		ctx.fill();
		
	</script>
<body>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

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

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

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

    ctx.shadowOffsetX = 10;

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

    ctx.shadowOffsetY = 10;

  3. 設(shè)置陰影的顏色，這里我們?cè)O(shè)置陰影的顏色為灰色。

    ctx.shadowColor = "#ccc";

  4. 設(shè)置陰影的模糊程度，這里我們?cè)O(shè)置了4個(gè)像素的模糊程度。

    ctx.shadowBlur = 4;

    這里的模糊值會(huì)擴(kuò)大原本陰影的大小。舉例說明：當(dāng)我們沒有設(shè)置模糊程度時(shí)，陰影是一個(gè) 100 * 100 的灰色矩形，當(dāng)我們?cè)O(shè)置模糊程度為 4 時(shí)，當(dāng)前陰影就變成了一個(gè) 108 * 108 的灰色矩形。陰影的上、下、左、右都會(huì)向外擴(kuò)充4個(gè)像素，這4個(gè)像素會(huì)以設(shè)定的陰影顏色從內(nèi)向外漸變?yōu)橥该鳌?/p>

運(yùn)行結(jié)果：

注意事項(xiàng)

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

看一個(gè)案例：

實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>慕課網(wǎng)Wiki</title>
    <style>
        #imooc{
            border:1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="imooc">您的瀏覽器不支持 HTML5 canvas 標(biāo)簽</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"
		
		// 設(shè)置陰影效果
		ctx.shadowOffsetX = 10;  
		ctx.shadowOffsetY = 10;
		ctx.shadowColor = "#ccc";
		ctx.shadowBlur = 4;
		ctx.fill();
		
		// 恢復(fù)默認(rèn)陰影效果
		ctx.shadowOffsetX = 0;  
		ctx.shadowOffsetY = 0;
		ctx.shadowBlur = 0;
		
		ctx.fillStyle="yellow"
		ctx.fillRect(100,20, 50, 50)
		
	</script>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

運(yùn)行結(jié)果：

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

4. 屬性整理

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

4.1 shadowOffsetX 屬性

shadowOffsetX 屬性作用是設(shè)置水平偏移量，可以為負(fù)數(shù)，負(fù)數(shù)值向左偏移。

變量說明：

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

4.2 shadowOffsetY 屬性

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

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

4.3 shadowBlur 屬性

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

變量說明：

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

4.4 shadowColor 屬性

shadowColor 屬性作用是設(shè)置陰影顏色。

變量說明：

屬性名 類型 說明
shadowColor CSS 顏色值 標(biāo)準(zhǔn)的 CSS 顏色值，用于設(shè)定陰影顏色效果，默認(rèn)是全透明的黑色。

5. 總結(jié)

本小節(jié)我們主要學(xué)習(xí)了利用4個(gè)陰影屬性給圖形設(shè)置陰影效果，需要注意的是設(shè)置的陰影效果屬于全局作用，會(huì)影響到后面繪制的圖形。