水車_ ·繪制圓
1. 前言
前面我們學(xué)習(xí)繪制的路徑都是以直線為主，比如線段、折線或者是繪制的矩形，它們都是由直線組成的。今天開始，我們學(xué)習(xí)曲線的繪制。本小節(jié)就先從如何畫一個(gè)圓開始。
2. 利用 arc 方法繪制圓
繪制圓在 canvas 中是常用的方法，在 canvas API 中直接提供了一個(gè)封裝好的繪制圓的方法 arc()。 這個(gè)方法接收 5 個(gè)必填參數(shù)x，y，r，sAngle，eAngle，還有一個(gè) Boolean 類型的可選參數(shù) counterclockwise，用于規(guī)定是從順時(shí)針還是逆時(shí)針開始繪制路徑。
先看整體案例：
<!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');
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); //調(diào)用了直接繪制圓的函數(shù)
ctx.stroke();
</script>
</body>
</html>
運(yùn)行結(jié)果：
我們從案例中可以看到，繪制一個(gè)圓形路徑只需要調(diào)用一個(gè)函數(shù)即可，arc 方法和我們之前學(xué)過的 rect 繪制矩形的方法類似，也是繪制了一個(gè)路徑，我們后續(xù)對路徑的描邊或者填充依然是需要調(diào)用 stroke 或者 fill 方法。
3. arc 方法參數(shù)
前面提到 arc 方法有 5 個(gè)必填參數(shù)和1個(gè)可選參數(shù)，我們詳細(xì)地說明一下這幾個(gè)參數(shù)的用途。
前三個(gè)參數(shù)：x，y，r 分別代表了圓心坐標(biāo) (x, y)和要繪制圓的半徑，這個(gè)很好理解，我們著重講一下后面三個(gè)參數(shù)。
我們先來看一張圖片：
上圖中，x，y，r 分別對應(yīng)著圓的中心和半徑，圖里還有一個(gè)開始角和結(jié)束角，這就是第四個(gè)參數(shù) sAngle 和第五個(gè)參數(shù) sAngle 表示的內(nèi)容。明白了 5 個(gè)必填參數(shù)的含義，我想同學(xué)們應(yīng)該可以想到 act 方法不僅可以畫整圓，也是可以畫半圓的，我們只需要調(diào)整開始角和結(jié)束角的大小即可。
我們看一個(gè)案例：
<!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');
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>
執(zhí)行結(jié)果：
我們可以看到從 0 到 π 的一個(gè)半圓已經(jīng)繪制好了。我們注意到默認(rèn)繪制半圓是順時(shí)針繪制的，如果我想讓逆時(shí)針繪制應(yīng)該怎么做呢？這時(shí)我們就用到了 arc 方法的第六個(gè)可選參數(shù)：counterclockwise。
我們還是用上一個(gè)案例來說明。
<!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');
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); // 繪制半圓,傳遞了第六個(gè)參數(shù)為 true
ctx.stroke();
</script>
</body>
</html>
運(yùn)行結(jié)果：
這樣我們就讓圓弧實(shí)現(xiàn)了逆時(shí)針繪制。
不知道同學(xué)們有沒有注意到上面兩個(gè)案例中半圓都是沒有閉合的一條弧線，如果想要閉合也很簡單，只需要調(diào)用我們之前學(xué)習(xí)過的 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 標(biāo)簽</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); // 繪制半圓,傳遞了第六個(gè)參數(shù)為 true
ctx.closePath()
ctx.stroke();
ctx.beginPath();
ctx.arc(450, 150, 100, 0, 1*Math.PI, true); // 繪制半圓,傳遞了第六個(gè)參數(shù)為 true
ctx.closePath()
ctx.stroke();
</script>
</body>
</html>
運(yùn)行結(jié)果：
執(zhí)行了 closePath() 就可以得到一條閉合的路徑了。
4. 方法整理
本小節(jié)中我們使用到一個(gè)新的方法 arc()。
4.1 arc()方法
arc 方法作用是繪制一個(gè)起點(diǎn)在 (x, y)、半徑為 r 的圓弧，圓弧由起始角和結(jié)束角控制。
變量說明：
| 變量名 | 類型 | 是否必須 | 說明 |
|---|---|---|---|
| x | Number | 是 | 指定圓心位置的X坐標(biāo)。 |
| y | Number | 是 | 指定圓心位置的Y坐標(biāo)。 |
| r | Number | 是 | 圓的半徑。 |
| sAngle | Number | 是 | 起始角，以弧度計(jì)，（弧的圓形的三點(diǎn)鐘位置是 0 度）。 |
| eAngle | Number | 是 | 結(jié)束角，以弧度計(jì)。 |
| counterclockwise | Boolean | 否 | 規(guī)定應(yīng)該逆時(shí)針還是順時(shí)針繪圖，false = 順時(shí)針，true = 逆時(shí)針。 |
5. 總結(jié)
本小節(jié)我們主要學(xué)習(xí)了利用 arc 方法繪制整圓和半圓形以及閉合圓弧。我們下一節(jié)將會(huì)講另外一種繪制圓弧的方法。
2025 imooc.com All Rights Reserved |