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

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

繪制圓

1. 前言

前面我們學習繪制的路徑都是以直線為主，比如線段、折線或者是繪制的矩形，它們都是由直線組成的。今天開始，我們學習曲線的繪制。本小節就先從如何畫一個圓開始。

2. 利用 arc 方法繪制圓

繪制圓在 canvas 中是常用的方法，在 canvas API 中直接提供了一個封裝好的繪制圓的方法 arc()。 這個方法接收 5 個必填參數x，y，r，sAngle，eAngle，還有一個 Boolean 類型的可選參數 counterclockwise，用于規定是從順時針還是逆時針開始繪制路徑。

先看整體案例：

實例演示
預覽 復制
復制成功！
<!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');
		canvas.width=300
		canvas.height=300
		const ctx = canvas.getContext('2d');
		ctx.strokeStyle="#456795";
		ctx.lineWidth=8;
		
		ctx.arc(150, 150, 100, 0, 2*Math.PI);  //調用了直接繪制圓的函數
	
		ctx.stroke();
	</script>
</body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

運行結果：

我們從案例中可以看到，繪制一個圓形路徑只需要調用一個函數即可，arc 方法和我們之前學過的 rect 繪制矩形的方法類似，也是繪制了一個路徑，我們后續對路徑的描邊或者填充依然是需要調用 stroke 或者 fill 方法。

3. arc 方法參數

前面提到 arc 方法有 5 個必填參數和1個可選參數，我們詳細地說明一下這幾個參數的用途。

前三個參數：x，y，r 分別代表了圓心坐標 (x, y)和要繪制圓的半徑，這個很好理解，我們著重講一下后面三個參數。

我們先來看一張圖片：

上圖中，x，y，r 分別對應著圓的中心和半徑，圖里還有一個開始角和結束角，這就是第四個參數 sAngle 和第五個參數 sAngle 表示的內容。明白了 5 個必填參數的含義，我想同學們應該可以想到 act 方法不僅可以畫整圓，也是可以畫半圓的，我們只需要調整開始角和結束角的大小即可。

我們看一個案例：

實例演示
預覽 復制
復制成功！
<!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');
		canvas.width=300
		canvas.height=300
		const ctx = canvas.getContext('2d');
		ctx.strokeStyle="#456795";
		ctx.lineWidth=8;
		
		ctx.arc(150, 150, 100, 0, 1*Math.PI);  // 繪制半圓
	
		ctx.stroke();
	</script>
</body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

執行結果：

我們可以看到從 0 到 π 的一個半圓已經繪制好了。我們注意到默認繪制半圓是順時針繪制的，如果我想讓逆時針繪制應該怎么做呢？這時我們就用到了 arc 方法的第六個可選參數：counterclockwise。

我們還是用上一個案例來說明。

實例演示
預覽 復制
復制成功！
<!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');
		canvas.width=300
		canvas.height=300
		const ctx = canvas.getContext('2d');
		ctx.strokeStyle="#456795";
		ctx.lineWidth=8;
		
		ctx.arc(150, 150, 100, 0, 1*Math.PI, true);  // 繪制半圓,傳遞了第六個參數為 true
	
		ctx.stroke();
	</script>
</body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

運行結果：

這樣我們就讓圓弧實現了逆時針繪制。

不知道同學們有沒有注意到上面兩個案例中半圓都是沒有閉合的一條弧線，如果想要閉合也很簡單，只需要調用我們之前學習過的 closePath() 即可。

案例：

實例演示
預覽 復制
復制成功！
<!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');
		canvas.width=600
		canvas.height=300
		const ctx = canvas.getContext('2d');
		ctx.strokeStyle="#456795";
		ctx.lineWidth=8;
		
		ctx.arc(150, 150, 100, 0, 1*Math.PI, false);  // 繪制半圓,傳遞了第六個參數為 true
		ctx.closePath()
		ctx.stroke();
		
		ctx.beginPath();
		ctx.arc(450, 150, 100, 0, 1*Math.PI, true);  // 繪制半圓,傳遞了第六個參數為 true
		ctx.closePath()
		ctx.stroke();
		
	</script>
</body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

運行結果：

執行了 closePath() 就可以得到一條閉合的路徑了。

4. 方法整理

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

4.1 arc()方法

arc 方法作用是繪制一個起點在 (x, y)、半徑為 r 的圓弧，圓弧由起始角和結束角控制。

變量說明：

變量名 類型 是否必須 說明
x Number 是 指定圓心位置的X坐標。
y Number 是 指定圓心位置的Y坐標。
r Number 是 圓的半徑。
sAngle Number 是 起始角，以弧度計，（弧的圓形的三點鐘位置是 0 度）。
eAngle Number 是 結束角，以弧度計。
counterclockwise Boolean 否 規定應該逆時針還是順時針繪圖，false = 順時針，true = 逆時針。

5. 總結

本小節我們主要學習了利用 arc 方法繪制整圓和半圓形以及閉合圓弧。我們下一節將會講另外一種繪制圓弧的方法。