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

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

繪制二次貝塞爾曲線

1. 前言

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

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

2. 二次貝塞爾曲線

二次貝塞爾曲線是一種二次曲線，它只能向一個方向彎曲，由三個點來定義：兩個錨點及一個控制點，控制點用來控制曲線的形狀。

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

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

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

具體繪制方法為：

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

先看整體案例：

實例演示
預覽 復制
復制成功！
<!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 標簽</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();
		
		//繪制起點
		ctx.beginPath();
		ctx.arc(40,40,8,0,2*Math.PI)
		ctx.fillStyle= "#888"
		ctx.fill()
		
		//繪制控制點
		ctx.beginPath();
		ctx.arc(260,150,8,0,2*Math.PI)
		ctx.fillStyle= "#888"
		ctx.fill()
		
		//繪制終點
		ctx.beginPath();
		ctx.arc(40,260,8,0,2*Math.PI)
		ctx.fillStyle= "#888"
		ctx.fill()
	</script>
</body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

運行結(jié)果：

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

3. 方法整理

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

3.1 quadraticCurveTo() 方法

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

變量說明：

變量名 類型 是否必須 說明
cpx Number 是 控制點位置的X坐標。
cpy Number 是 控制點位置的Y坐標。
x Number 是 終點位置的X坐標。
y Number 是 終點位置的Y坐標。

4. 總結(jié)

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