亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

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

繪制三次貝塞爾曲線

1. 前言

上一節我們學習了二次貝塞爾曲線，本節我們開始學習三次貝塞爾曲線。貝塞爾曲線都是由一個起點、一個終點和多個控制點組成。二次貝塞爾曲線有一個控制點，三次貝塞爾曲線有兩個控制點，n 次貝塞爾曲線就有 n-1 個控制點。

2. 三次貝塞爾曲線

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

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

上圖中 p1 和 p4 是兩個錨點，p2 和 p3 是兩個控制點。

在線工具

這里介紹一個開源的在線畫貝塞爾曲線的工具，同學們可以體驗一下：N階貝塞爾曲線生成器

canvas 繪制三次貝塞爾曲線

在 canvas 中，繪制三次貝塞爾曲線和繪制二次貝塞爾曲線方法類似，只是比二次貝塞爾曲線多了一個控制點參數，具體繪制方法為：

ctx.bezierCurveTo(cpx1,cpy1,cpx2,cpy2,x,y);

先看整體案例：

實例演示
預覽 復制
復制成功！
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>慕課網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.bezierCurveTo(260,150, 40,260, 160, 80);  //調用了直接繪制橢圓的函數
		ctx.stroke();
		
		//繪制起點
		ctx.beginPath();
		ctx.arc(40,40,8,0,2*Math.PI)
		ctx.fillStyle= "#888"
		ctx.fill()
		
		//繪制控制點1
		ctx.beginPath();
		ctx.arc(260,150,8,0,2*Math.PI)
		ctx.fillStyle= "#888"
		ctx.fill()
		
		//繪制控制點2
		ctx.beginPath();
		ctx.arc(40,260,8,0,2*Math.PI)
		ctx.fillStyle= "#888"
		ctx.fill()
		
		
		//繪制終點
		ctx.beginPath();
		ctx.arc(160, 80,8,0,2*Math.PI)
		ctx.fillStyle= "#888"
		ctx.fill()
	</script>
</body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

運行結果：

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

3. 方法整理

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

3.1 bezierCurveTo() 方法

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

變量說明：

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

4. 總結

本小節我們主要學習了利用 bezierCurveTo 方法繪制一條三次貝塞爾曲線，這個方法有6個參數，分別是兩個控制點和終點的坐標。