選單
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Canvas bezierCurveTo() 方法

❮ Canvas 參考

示例

繪製三次貝塞爾曲線

您的瀏覽器不支援 HTML5 canvas 標籤。

JavaScript

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.bezierCurveTo(20, 100, 200, 100, 200, 20);
ctx.stroke();
自己動手試一試 »

描述

bezierCurveTo() 方法透過使用表示三次貝塞爾曲線的控制點向路徑新增曲線。

使用 stroke()fill() 方法來繪製路徑。

三次貝塞爾曲線需要三個點。前兩個點是用於三次貝塞爾計算的控制點,最後一個點是曲線的終點。曲線的起點是當前路徑的最後一個點。如果路徑不存在,請使用 beginPath() moveTo() 方法定義起點。

A cubic bezier curve

起點:moveTo(20, 20)

控制點 1:bezierCurveTo(20, 100, 200, 100, 200, 20)

控制點 2:bezierCurveTo(20, 100, 200, 100, 200, 20)

終點:bezierCurveTo(20, 100, 200, 100, 200, 20)

注意

quadraticCurveTo() 方法 有一個控制點,而不是兩個。

另請參閱

beginPath() 方法 (開始一條新路徑)

closePath() 方法 (關閉當前路徑)

moveTo() 方法 (將路徑移動到指定點)

lineTo() 方法 (向路徑新增一條線)

fill() 方法 (填充當前路徑)

stroke() 方法 (繪製當前路徑)

arc() 方法(在路徑上新增一個圓)

arcTo() 方法 (向路徑新增一個弧形)

quadraticCurveTo() 方法 (向路徑新增一條二次貝塞爾曲線)


語法

context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

引數值

引數 描述 試一試
cp1x 第一個貝塞爾控制點的 x 座標 試一試 »
cp1y 第一個貝塞爾控制點的 y 座標 試一試 »
cp2x 第二個貝塞爾控制點的 x 座標 試一試 »
cp2y 第二個貝塞爾控制點的 y 座標 試一試 »
x 終點的 x 座標 試一試 »
y 終點的 y 座標 試一試 »

返回值


瀏覽器支援

<canvas> 元素是 HTML5 標準(2014)。

bezierCurveTo() 在所有現代瀏覽器中都受支援

Chrome Edge Firefox Safari Opera IE
9-11

❮ Canvas 參考

×

聯絡銷售

如果您想將 W3Schools 服務用於教育機構、團隊或企業,請傳送電子郵件給我們
sales@w3schools.com

報告錯誤

如果您想報告錯誤,或想提出建議,請傳送電子郵件給我們
help@w3schools.com

W3Schools 經過最佳化,旨在方便學習和培訓。示例可能經過簡化,以提高閱讀和學習體驗。教程、參考資料和示例會不斷審查,以避免錯誤,但我們無法保證所有內容的完全正確性。使用 W3Schools 即表示您已閱讀並接受我們的使用條款Cookie 和隱私政策

版權所有 1999-2024 Refsnes Data。保留所有權利。W3Schools 由 W3.CSS 提供支援