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

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

用線條繪制圖形

1. 前言

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

2. 線條繪制矩形

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

先看整體案例，請在firefox瀏覽器中查看本案例。

實例演示
預覽 復制
復制成功！
<!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 標簽</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>
運行案例 點擊 "運行案例" 可查看在線運行效果

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

Firefox展示效果

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

兩個圖一對比應該可以看出來，在firefox下，用上面代碼繪制的矩形是有一定問題的，左上角會有一個明顯的缺口，這是由于繪制的線條寬度超過了 1px，如果繪制 1px 寬的線條，則不會有這個問題。

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

closePath() 方法用于創(chuàng)建從筆觸當前點到開始點的路徑。

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

實例演示
預覽 復制
復制成功！
<!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 標簽</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>
運行案例 點擊 "運行案例" 可查看在線運行效果

運行結(jié)果：

closePath閉合矩形

3. 線條繪制三角形

我們利用 closePath 再繪制一個三角形，先看整體案例。

實例演示
預覽 復制
復制成功！
<!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 標簽</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>
運行案例 點擊 "運行案例" 可查看在線運行效果

運行結(jié)果：

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

4. 路徑方法整理

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

4.1 closePath(x, y)

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

5. 總結(jié)

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