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

水車_ · 更新于 2021-08-05

繪制圓弧

1. 前言

上一節(jié)我們學(xué)習(xí)了利用 arc 方法繪制一個(gè)標(biāo)準(zhǔn)的圓或者圓弧，arc 方法依托于圓心、半徑、起始角和結(jié)束角繪制圓弧，今天我們?cè)賮?lái)學(xué)習(xí)一下繪制圓弧的方法 arcTo。

2. 利用 arcTo 方法繪制弧線

arcTo() 是利用兩條相交切線來(lái)確定圓弧的位置，開始前我們先要搞懂切線的幾個(gè)知識(shí)點(diǎn)。

如何確定切線？
我們都知道兩點(diǎn)確定一條直線，這里兩條直線相交處有一個(gè)交點(diǎn)，交點(diǎn)是兩條線共用的一個(gè)點(diǎn)，所以我們只需要三個(gè)點(diǎn)就能確定兩條切線。

根據(jù)切線如何確定圓心？
切線的性質(zhì)有：
(1)切線和圓只有一個(gè)公共點(diǎn)。
(2)切線和圓心的距離等于圓的半徑。
(3)切線垂直于經(jīng)過(guò)切點(diǎn)的半徑。
(4)經(jīng)過(guò)圓心垂直于切線的直線必過(guò)切點(diǎn)。
(5)經(jīng)過(guò)切點(diǎn)垂直于切線的直線必過(guò)圓心。

我們根據(jù)切線的垂直線必過(guò)圓心，即可確定圓心。

我們來(lái)看一張圖片：

上圖中，只要我們確定了 PA、PB 這兩條切線和圓的半徑 OA，即可確定 AB 這條弧線。上圖中，我們沿著 OP 延長(zhǎng)線移動(dòng) O 點(diǎn)的位置，即可得到半徑不同的圓，也就得到了不同的 AB 弧線。

到這里我們明白了：

  • 有三個(gè)點(diǎn)就可以確定兩條切線。
  • 有圓的半徑就可以確定切線間的一條弧線。

arcTo 就是利用上面的原理來(lái)繪制弧線的。arcTo 方法有5個(gè)參數(shù)，前兩個(gè)參數(shù)表示的是上圖中 P 點(diǎn)的坐標(biāo)，也就是切線的交點(diǎn)，第3個(gè)和第4個(gè)參數(shù)表示 PB 切線上的任意一個(gè)坐標(biāo)點(diǎn)，第5個(gè)參數(shù)表示的是上圖中 OA 的長(zhǎng)度，也就是繪制圓的半徑。

特別注意：
第3、4個(gè)參數(shù)表示的點(diǎn)不是切點(diǎn)！
第3、4個(gè)參數(shù)表示的點(diǎn)不是切點(diǎn)！
第3、4個(gè)參數(shù)表示的點(diǎn)不是切點(diǎn)！

arcTo 方法的參數(shù)中只有兩個(gè)點(diǎn)和一個(gè)半徑，我們前面講到要繪制弧線，必須是三個(gè)點(diǎn)，那第一個(gè)點(diǎn)哪兒去了呢？其實(shí)第一個(gè)點(diǎn)就是當(dāng)前畫布中筆觸所在的位置，也就是當(dāng)前畫布中已經(jīng)繪制的路徑的終點(diǎn)。

先看整體案例：

實(shí)例演示
預(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');
		canvas.width=300
		canvas.height=300
		const ctx = canvas.getContext('2d');
		
		// 繪制弧線
		ctx.beginPath();
		ctx.moveTo(40,40);
		ctx.arcTo(260,40, 260,200, 60);  //調(diào)用了繪制圓的函數(shù)
		ctx.strokeStyle = "#456795";
		ctx.lineWidth = 4;
		ctx.stroke();
		
		// ==============一下內(nèi)容為復(fù)制內(nèi)容=================
		// 繪制切線
		ctx.beginPath()
		ctx.strokeStyle="#ccc";
		ctx.lineWidth=1;
		ctx.moveTo(40,40);
		ctx.lineTo(260,40);
		ctx.lineTo(260,260);
		ctx.stroke();
		
		//繪制P點(diǎn)
		ctx.beginPath();
		ctx.arc(260,40,4,0, 2*Math.PI)
		ctx.fillStyle = "#000"
		ctx.fill()
		
		//繪制A點(diǎn)
		ctx.beginPath();
		ctx.arc(40,40,4,0, 2*Math.PI)
		ctx.fillStyle = "#000"
		ctx.fill()
		
		
		//繪制B點(diǎn)
		ctx.beginPath();
		ctx.arc(260,200,4,0, 2*Math.PI)
		ctx.fillStyle = "#000"
		ctx.fill()
		
		//繪制切點(diǎn)
		ctx.beginPath();
		ctx.arc(200,40,4,0, 2*Math.PI)
		ctx.fillStyle = "yellow"
		ctx.fill()
		
		
		//繪制切點(diǎn)
		ctx.beginPath();
		ctx.arc(260,100,4,0, 2*Math.PI)
		ctx.fillStyle = "yellow"
		ctx.fill()
		
		//繪制圓心 O 點(diǎn)
		ctx.beginPath();
		ctx.arc(200,100,4,0, 2*Math.PI)
		ctx.fillStyle = "blue"
		ctx.fill()
		
		//繪制輔助圓
		ctx.beginPath();
		ctx.lineWidth = 1;
		ctx.strokeStyle="#ccc"
		ctx.arc(200,100,60,0, 2*Math.PI)
		ctx.stroke()
		
	</script>
</body>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

運(yùn)行結(jié)果：

我們對(duì)上面的繪制弧線代碼做拆分講解：

  1. 開始一個(gè)新路徑。

    ctx.beginPath();

  2. 確定第一個(gè)坐標(biāo)點(diǎn) A 點(diǎn)，A 點(diǎn)是當(dāng)前已有路徑的終點(diǎn)。

    ctx.moveTo(40,40);

    我換一個(gè)寫法：

    ctx.moveTo(40,0);
ctx.lineTo(80,40);

    這時(shí)候 A 點(diǎn)的位置就變成了 (80, 40)。

  3. 根據(jù)切線交點(diǎn)、第二條切線上的某個(gè)點(diǎn)和半徑開始繪制弧線。

    ctx.arcTo(260,40, 260,200, 60);  //調(diào)用了繪制圓的函數(shù)

    這里需要注意三點(diǎn)：
    (1) A 點(diǎn)和 PA 切線的切點(diǎn)會(huì)被自動(dòng)連接起來(lái)，但是 PB 切線上的切點(diǎn)和 B點(diǎn)不會(huì)自動(dòng)連接起來(lái)。

    (2) A 點(diǎn)肯定在路徑上，B 點(diǎn)不一定在路徑上。
    (3) 切點(diǎn)由 canvas 自動(dòng)計(jì)算。

  4. 設(shè)置繪制樣式以及開始描邊。

    ctx.strokeStyle = "#456795";
ctx.lineWidth = 4;
ctx.stroke();

我們從案例中可以看到，繪制一個(gè)圓形路徑只需要調(diào)用一個(gè)函數(shù)即可，arc 方法和我們之前學(xué)過(guò)的 rect 繪制矩形的方法類似，也是繪制了一個(gè)路徑，我們后續(xù)對(duì)路徑的描邊或者填充依然是需要調(diào)用 stroke 或者 fill 方法的。

3. 繪制圓角矩形

直接看案例：

實(shí)例演示
預(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');
		canvas.width=300
		canvas.height=300
		const ctx = canvas.getContext('2d');
		
		// 繪制圓角矩形
		ctx.beginPath();
		ctx.moveTo(80,40);
		ctx.arcTo(260,40, 260,200, 40);
		ctx.arcTo(260,260, 200,260, 40); 
		ctx.arcTo(40,260, 40,100, 40); 
		ctx.arcTo(40,40, 80,40,40)
	
		ctx.strokeStyle = "#456795";
		ctx.lineWidth = 4;
		ctx.stroke();
		ctx.fillStyle = "#ccc";
		ctx.fill();
	</script>
</body>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

運(yùn)行結(jié)果：

4. arc 和 arcTo 對(duì)比

相同點(diǎn)：

  1. 都是繪制圓弧。

不同點(diǎn)：

  1. arc 通過(guò)圓心 + 半徑 + 弧度繪制圓弧， arcTo 是根據(jù)切線 + 半徑繪制圓弧。
  2. arc 可以繪制任意弧度的圓弧，arcTo 只能繪制小于180度的圓弧。
  3. arc 可以不需要起點(diǎn)，可以直接繪制， arcTo 繪制前必須存在一個(gè)端點(diǎn)。
  4. arc 可以設(shè)置繪制方向，arcTo 只能由切線控制。

5. 方法整理

本小節(jié)中我們使用到一個(gè)新的繪制圓弧的方法 arcTo。

5.1 arcTo()方法

arcTo 方法作用是繪制一個(gè)切線為 PA 和 PB、半徑為 r 的圓弧，圓弧由切線控制。

變量說(shuō)明：

變量名 類型 是否必須 說(shuō)明
x1 Number 是 切線交點(diǎn)P的X坐標(biāo)。
y1 Number 是 切線交點(diǎn)P的Y坐標(biāo)。
x2 Number 是 指PB切線的任意一點(diǎn)的X坐標(biāo)。
y2 Number 是 指PB切線的任意一點(diǎn)的Y坐標(biāo)。
r Number 是 圓的半徑。

6. 總結(jié)

本小節(jié)我們主要學(xué)習(xí)了利用 arcTo 方法繪制圓弧，本節(jié)主要難點(diǎn)在于理解繪制的原理，希望同學(xué)們多多練習(xí)加深記憶。