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

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

繪制二次貝塞爾曲線

1. 前言

Bézier curve（貝塞爾曲線）于1959年，由法國(guó)物理學(xué)家與數(shù)學(xué)家 Paul de Casteljau 所發(fā)明，于1962年，由法國(guó)工程師皮埃爾·貝塞爾（Pierre Bézier）所廣泛發(fā)表，并用于汽車的車身設(shè)計(jì)。貝賽爾曲線為計(jì)算機(jī)矢量圖形學(xué)奠定了基礎(chǔ)，它的主要意義在于無(wú)論是直線或曲線都能在數(shù)學(xué)上予以描述。

貝塞爾曲線分為兩種：二次貝塞爾曲線和三次貝塞爾曲線。本節(jié)我們主要介紹二次貝塞爾曲線。

2. 二次貝塞爾曲線

二次貝塞爾曲線是一種二次曲線，它只能向一個(gè)方向彎曲，由三個(gè)點(diǎn)來(lái)定義：兩個(gè)錨點(diǎn)及一個(gè)控制點(diǎn)，控制點(diǎn)用來(lái)控制曲線的形狀。

我們先看一下二次貝塞爾曲線的繪制過(guò)程的：

二次貝塞爾曲線也可以用三個(gè)特征切線定義，曲線的第一部分與上下文點(diǎn)和控制點(diǎn)形成的虛線相切，曲線的頂部與 midpoint 1 和 midpoint 2 形成的虛線相切，曲線的最后部分與控制點(diǎn)和終點(diǎn)形成的虛線相切。如圖所示：

在 canvas 中，繪制二次貝塞爾曲線和我們前面學(xué)過(guò)的 lineTo 方法類似，都需要在當(dāng)前上下文中存在一個(gè)已有路徑的終點(diǎn)作為貝塞爾曲線的起點(diǎn)，既然起點(diǎn)是已知的，那么只需知道控制點(diǎn)和終點(diǎn)，就能唯一確定一條二次貝塞爾曲線。

具體繪制方法為：

ctx.quadraticCurveTo(cpx,cpy,x,y);

先看整體案例：

實(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.strokeStyle="#456795";
		ctx.lineWidth=8;
		
		ctx.beginPath();
		ctx.moveTo(40,40);
		ctx.quadraticCurveTo(260,150, 40,260);  //調(diào)用了直接繪制橢圓的函數(shù)
		ctx.stroke();
		
		//繪制起點(diǎn)
		ctx.beginPath();
		ctx.arc(40,40,8,0,2*Math.PI)
		ctx.fillStyle= "#888"
		ctx.fill()
		
		//繪制控制點(diǎn)
		ctx.beginPath();
		ctx.arc(260,150,8,0,2*Math.PI)
		ctx.fillStyle= "#888"
		ctx.fill()
		
		//繪制終點(diǎn)
		ctx.beginPath();
		ctx.arc(40,260,8,0,2*Math.PI)
		ctx.fillStyle= "#888"
		ctx.fill()
	</script>
</body>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

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

這樣我們就繪制了一條二次貝塞爾曲線。

3. 方法整理

本小節(jié)中我們使用到一個(gè)新的方法 quadraticCurveTo()。

3.1 quadraticCurveTo() 方法

quadraticCurveTo 方法作用是繪制一條二次貝塞爾曲線。

變量說(shuō)明：

變量名 類型 是否必須 說(shuō)明
cpx Number 是 控制點(diǎn)位置的X坐標(biāo)。
cpy Number 是 控制點(diǎn)位置的Y坐標(biāo)。
x Number 是 終點(diǎn)位置的X坐標(biāo)。
y Number 是 終點(diǎn)位置的Y坐標(biāo)。

4. 總結(jié)

本小節(jié)我們主要學(xué)習(xí)了利用 quadraticCurveTo 方法繪制一條二次貝塞爾曲線，這個(gè)方法有四個(gè)參數(shù)，分別是控制點(diǎn)和終點(diǎn)的坐標(biāo)。我們下一節(jié)開始學(xué)習(xí)三次貝塞爾曲線。