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

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

路徑填充

1. 前言

我們之前學(xué)習(xí)的教程主要內(nèi)容都以繪制路徑和畫輪廓線為主，今天我們將學(xué)習(xí)一個(gè)新的概念內(nèi)容：填充路徑。

2. 利用 fill 方法填充路徑

填充路徑，填充的必須是路徑，所以我們得先有路徑才能填充，需要注意，這里的路徑不能是一條線段，最少需要一個(gè)兩條邊的折線。下面我們就以案例的形式學(xué)習(xí)一下“填充”相關(guān)的內(nèi)容。

2.1 填充矩形

我們先用上一小節(jié)學(xué)習(xí)的 rect 方法繪制一個(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');
		const ctx = canvas.getContext('2d');
		ctx.strokeStyle="blue";
		ctx.lineWidth=8;
		ctx.rect(10,10,200,100); 
		
		ctx.fill(); //直接填充路徑
	</script>
</body>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

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

我們從案例中可以看到，調(diào)用 fill 函數(shù)，會(huì)使用黑色把整個(gè)矩形框填滿，這樣的效果就是填充。當(dāng)然，我們也可以利用 fillStyle 屬性設(shè)定填充顏色。

2.2 設(shè)定 fillStyle 屬性

fillStyle 屬性的作用是設(shè)定填充內(nèi)容的顏色，它和設(shè)定 strokeStyle 描邊屬性一樣。

先看整體案例：

實(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');
		const ctx = canvas.getContext('2d');
		ctx.moveTo(10,10);
		ctx.lineTo(10,100);
		ctx.lineTo(200,100);
		ctx.closePath();  
		
		ctx.fillStyle="#cccccc" // 設(shè)定填充顏色
		ctx.fill(); 
	</script>
</body>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

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

我們從案例中可以看到，設(shè)定了填充顏色后再調(diào)用 fill 函數(shù)，會(huì)使用設(shè)定的顏色把整個(gè)路徑填滿。

3. stroke() 和 fill() 對比學(xué)習(xí)

我們知道，stroke 方法作用是描邊，fill 方法作用是填充，我們來整體再回顧學(xué)習(xí)一下這兩個(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');
		const ctx = canvas.getContext('2d');
		
		ctx.moveTo(10,10);
		ctx.lineTo(10,100);
		ctx.lineTo(200,100);
		ctx.lineTo(200,10);
		ctx.closePath();
		
		ctx.strokeStyle="blue";
		ctx.fillStyle="#ccc";
		
		ctx.lineWidth=8;
		
		ctx.stroke();  
		ctx.fill();
		
	</script>
</body>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

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

我們將上面案例的繪圖內(nèi)容拆分講解：

  1. 獲取 canvas 的渲染上下文。

    const canvas = document.getElementById('imooc');
const ctx = canvas.getContext('2d');

  2. 繪制一個(gè)圖形路徑。

    ctx.moveTo(10,10);
ctx.lineTo(10,100);
ctx.lineTo(200,100);
ctx.lineTo(200,10);
ctx.closePath();

  3. 分別設(shè)定描邊的顏色和填充的顏色。

    ctx.strokeStyle="blue";
ctx.fillStyle="#ccc";

  4. 描邊和填充。

    提示：當(dāng)設(shè)定了描邊寬度以后，這里先描邊后填充和先填充后描邊繪制出來的圖形是不一樣的，后繪制的內(nèi)容會(huì)覆蓋前面繪制的內(nèi)容。

    ctx.stroke();  
ctx.fill();

我們從案例中可以看到，路徑的描邊和填充在使用上都是相似的。

4. 方法整理

本小節(jié)中我們使用到一個(gè)新的方法 fill。

4.1 fill() 方法

fill() 方法是用于填充當(dāng)前已存在的路徑的方法，如果沒有設(shè)置填充顏色，則默認(rèn)使用黑色填充。

5. 屬性整理

本小節(jié)中我們使用到一個(gè)新的屬性 fillStyle。

5.1 fillStyle 屬性

fillStyle 屬性用于設(shè)置填充的顏色，它和 strokeStyle 在使用上是一致的。

ctx.fillStyle = "blue"
ctx.fillStyle = "#cccccc"
ctx.fillStyle = "#ccc"
ctx.fillStyle = "rgb(200, 200, 200)"
ctx.fillStyle = "rgba(200, 200, 200, 0.5)"
ctx.fillStyle = "hsl(0, 100%, 50%)"
ctx.fillStyle = "hsla(0, 100%, 50%, 0.5)"

上面7種寫法都是支持的。

6. 總結(jié)

本小節(jié)我們主要學(xué)習(xí)了利用 fill 方法填充一個(gè)圖形。