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

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

繪制矩形

1. 前言

本小節(jié)我們將學(xué)習(xí)矩形的兩種繪制方法。

2. 利用 rect 方法繪制矩形

繪制矩形在 canvas 中是常用的方法，所以 canvas API 直接提供了一個封裝好的繪制矩形的方法 rect()，這個方法接收4個參數(shù) x，y，width，height。

先看整體案例：

實例演示
預(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);  //調(diào)用了直接繪制矩形函數(shù)
		
		ctx.stroke();
	</script>
</body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

運行結(jié)果：

我們從案例中可以看到，繪制一個矩形路徑只需要調(diào)用一個函數(shù)即可，和上節(jié)課的繪制案例比較，我們省去了連每一個點的步驟。這里需要注意 rect 方法只是幫我們繪制了路徑，并不會把路徑實際地顯示到畫布上，我們依然需要調(diào)用 stroke 描邊方法才能看到繪制的圖形。

3. 利用 strokeRect 方法繪制矩形

canvas API 還提供了一個直接繪制矩形的方法 strokeRect()，這個方法調(diào)用和 rect 方法一樣，也是接收4個參數(shù)。

特別說明：利用 strokeRect 方法繪制的矩形獨立于其他路徑，后續(xù)對路徑的操作不會影響到 strokeRect 繪制的矩形。

先看整體案例：

實例演示
預(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.strokeRect(10,10,200,100);  //調(diào)用了直接繪制并渲染矩形函數(shù)
		
	</script>
</body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

運行結(jié)果：

我們從案例中可以看到，繪制一個矩形路徑只需要調(diào)用一個函數(shù)即可，和 rect 方法比較，這里我們沒有調(diào)用 stroke 方法了。

4. 方法整理

本小節(jié)中我們使用到兩個新的方法，分別是 rect 和 strokeRect。

4.1 rect()方法

rect 方法作用是繪制一個起點在 (x, y) 、寬度為 width、高度為 height 的矩形路徑，它有四個參數(shù)變量 x，y，width，height。

變量說明：

變量名 類型 是否必須 說明
x Number 是 指定左上角位置的X坐標(biāo)。
y Number 是 指定左上角位置的Y坐標(biāo)。
width Number 是 矩形的寬度值。
height Number 是 矩形的高度值。

4.2 strokeRect() 方法

strokeRect 是使用設(shè)定的繪畫樣式，描繪一個起點在 (x, y) 、寬度為 w、高度為 h 的矩形的方法，它直接繪制一個矩形，而不是一個路徑，它有四個參數(shù)變量 x，y，width，height。

變量說明：

變量名 類型 是否必須 說明
x Number 是 指定左上角位置的X坐標(biāo)。
y Number 是 指定左上角位置的Y坐標(biāo)。
width Number 是 矩形的寬度值。
height Number 是 矩形的高度值。

5. 總結(jié)

本小節(jié)我們主要學(xué)習(xí)了利用 rect 和 strokeRect 方法繪制矩形。到目前為止我們已經(jīng)學(xué)習(xí)了三種繪制矩形的方法，矩形在 canvas 中是最常用的一種繪制形狀，希望同學(xué)們認(rèn)真學(xué)習(xí)。我們下一節(jié)將會講解如何去填充一個路徑。