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

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

繪制三次貝塞爾曲線

1. 前言

上一節(jié)我們學(xué)習(xí)了二次貝塞爾曲線，本節(jié)我們開始學(xué)習(xí)三次貝塞爾曲線。貝塞爾曲線都是由一個(gè)起點(diǎn)、一個(gè)終點(diǎn)和多個(gè)控制點(diǎn)組成。二次貝塞爾曲線有一個(gè)控制點(diǎn)，三次貝塞爾曲線有兩個(gè)控制點(diǎn)，n 次貝塞爾曲線就有 n-1 個(gè)控制點(diǎn)。

2. 三次貝塞爾曲線

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

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

上圖中 p1 和 p4 是兩個(gè)錨點(diǎn)，p2 和 p3 是兩個(gè)控制點(diǎn)。

在線工具

這里介紹一個(gè)開源的在線畫貝塞爾曲線的工具，同學(xué)們可以體驗(yàn)一下：N階貝塞爾曲線生成器

canvas 繪制三次貝塞爾曲線

在 canvas 中，繪制三次貝塞爾曲線和繪制二次貝塞爾曲線方法類似，只是比二次貝塞爾曲線多了一個(gè)控制點(diǎn)參數(shù)，具體繪制方法為：

ctx.bezierCurveTo(cpx1,cpy1,cpx2,cpy2,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.bezierCurveTo(260,150, 40,260, 160, 80);  //調(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)1
		ctx.beginPath();
		ctx.arc(260,150,8,0,2*Math.PI)
		ctx.fillStyle= "#888"
		ctx.fill()
		
		//繪制控制點(diǎn)2
		ctx.beginPath();
		ctx.arc(40,260,8,0,2*Math.PI)
		ctx.fillStyle= "#888"
		ctx.fill()
		
		
		//繪制終點(diǎn)
		ctx.beginPath();
		ctx.arc(160, 80,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è)新的方法 bezierCurveTo()。

3.1 bezierCurveTo() 方法

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

變量說明：

變量名 類型 是否必須 說明
cpx1 Number 是 控制點(diǎn)位置1的X坐標(biāo)。
cpy1 Number 是 控制點(diǎn)位置1的Y坐標(biāo)。
cpx2 Number 是 控制點(diǎn)位置2的X坐標(biāo)。
cpy2 Number 是 控制點(diǎn)位置2的Y坐標(biāo)。
x Number 是 終點(diǎn)位置的X坐標(biāo)。
y Number 是 終點(diǎn)位置的Y坐標(biāo)。

4. 總結(jié)

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