亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

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

繪制矩形

1. 前言

本小節我們將學習矩形的兩種繪制方法。

2. 利用 rect 方法繪制矩形

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

先看整體案例：

實例演示
預覽 復制
復制成功！
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>慕課網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.strokeStyle="blue";
		ctx.lineWidth=8;
		
		ctx.rect(10,10,200,100);  //調用了直接繪制矩形函數
		
		ctx.stroke();
	</script>
</body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

運行結果：

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

3. 利用 strokeRect 方法繪制矩形

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

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

先看整體案例：

實例演示
預覽 復制
復制成功！
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>慕課網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.strokeStyle="blue";
		ctx.lineWidth=8;
		
		ctx.strokeRect(10,10,200,100);  //調用了直接繪制并渲染矩形函數
		
	</script>
</body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

運行結果：

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

4. 方法整理

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

4.1 rect()方法

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

變量說明：

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

4.2 strokeRect() 方法

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

變量說明：

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

5. 總結

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