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

水車(chē)_ · 更新于 2021-02-23

用線條繪制圖形

1. 前言

本小節(jié)我們學(xué)習(xí)如何用線條繪制矩形和三角形。

2. 線條繪制矩形

繪制折線上一小節(jié)我們已經(jīng)學(xué)過(guò)了，利用 moveTo、多個(gè) lineTo、stroke 這三個(gè)方法就可以做到。本小節(jié)我們先用之前學(xué)過(guò)的內(nèi)容繪制一個(gè)矩形。

先看整體案例，請(qǐng)?jiān)趂irefox瀏覽器中查看本案例。

實(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.lineTo(10,10);
		ctx.strokeStyle="blue"
        ctx.lineWidth=8
		ctx.stroke();
	</script>
</body>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

如果你使用的是 firefox 瀏覽器，你會(huì)看到這樣的效果：

Firefox展示效果

chrome瀏覽器下的效果是這樣的：

兩個(gè)圖一對(duì)比應(yīng)該可以看出來(lái)，在firefox下，用上面代碼繪制的矩形是有一定問(wèn)題的，左上角會(huì)有一個(gè)明顯的缺口，這是由于繪制的線條寬度超過(guò)了 1px，如果繪制 1px 寬的線條，則不會(huì)有這個(gè)問(wèn)題。

既然上面代碼繪制的矩形不是很完美，那有沒(méi)有比這個(gè)更好的繪制方案呢？這就要用到我們今天學(xué)習(xí)的新方法 closePath()。

closePath() 方法用于創(chuàng)建從筆觸當(dāng)前點(diǎn)到開(kāi)始點(diǎn)的路徑。

先看整體案例，依然是在 firefox 瀏覽器下查看效果。

實(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.lineTo(10,10); //去掉了這一行
		ctx.closePath();      //最后一筆路徑使用了closePath方法
		ctx.strokeStyle="blue"
		ctx.lineWidth=8
		ctx.stroke();
	</script>
</body>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

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

closePath閉合矩形

3. 線條繪制三角形

我們利用 closePath 再繪制一個(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.closePath();      //最后一筆路徑使用了closePath方法
		ctx.strokeStyle="blue"
		ctx.lineWidth=8
		ctx.stroke();
	</script>
</body>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

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

可以看到左上角閉合地非常完美。

4. 路徑方法整理

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

4.1 closePath(x, y)

closePath() 方法主要作用是創(chuàng)建從筆觸當(dāng)前點(diǎn)到 moveTo 的點(diǎn)的路徑，它的優(yōu)勢(shì)在于會(huì)自動(dòng)處理接口閉合的問(wèn)題。同學(xué)們可以用前面學(xué)過(guò)的知識(shí)繪制一個(gè)三角形，深刻體會(huì)一下 closePath() 的不同之處。

5. 總結(jié)

本小節(jié)我們學(xué)習(xí)了如何繪制矩形，還學(xué)習(xí)到了一個(gè)新的方法 closePath()，下一節(jié)我會(huì)帶領(lǐng)大家學(xué)習(xí)直接使用繪制矩形函數(shù)去繪制圖形。