資料結構
網路
關係資料庫管理系統(RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學使用HTML5 Canvas繪製貝塞爾曲線
HTML5 Canvas 的 `bezierCurveTo()` 方法可以用來生成貝塞爾曲線。貝塞爾曲線由起始點、兩個控制點和結束點定義。與二次曲線相比，貝塞爾曲線使用兩個控制點而不是一個控制點來定義，這使得我們可以建立更復雜的曲線。可以使用 `lineWidth`、`strokeStyle` 和 `lineCap` 屬性來自定義貝塞爾曲線的樣式。
什麼是貝塞爾曲線？
貝塞爾曲線可能在桌面出版和圖形程式中出現過。貝塞爾曲線提供了更強大的形狀控制。由於曲線的起點遵循其控制路徑，我們可以建立環繞或反向的曲線。當您需要在 Visio 風格的流程圖中連線兩個形狀時，它們非常理想。
貝塞爾曲線可以透過兩種不同的方式繪製
二次貝塞爾曲線
三次貝塞爾曲線
讓我們逐一瞭解使用 HTML5 canvas 繪製貝塞爾曲線。
二次貝塞爾曲線
二次貝塞爾曲線是 2nd 次的貝塞爾曲線，由三個點 (A0、A1 和 A2) 定義。
示例
讓我們來看下面的示例，它使用二次貝塞爾曲線繪製一條曲線。
<!DOCTYPE html>
<html>
<body>
<canvas id="mytutorial" width="300" height="150"></canvas>
<script>
var c = document.getElementById("mytutorial");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.quadraticCurveTo(25, 105, 205, 25);
ctx.stroke();
</script>
</body>
</html>
輸出
當指令碼執行時，它將生成一個輸出，在網頁上顯示使用二次貝塞爾曲線繪製的曲線。
三次貝塞爾曲線
三次貝塞爾曲線是 3rd 次的貝塞爾曲線，由四個點 (A0、A1、A2 和 A4) 定義。曲線從 A0 開始，在 A3 結束。
示例
在下面的示例中，我們使用三次貝塞爾曲線繪製曲線。
<!DOCTYPE html>
<html>
<body>
<canvas id="mytutorial" width="300" height="150"></canvas>
<script>
var c = document.getElementById("mytutorial");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.bezierCurveTo(30, 110, 210, 110, 210, 30);
ctx.stroke();
</script>
</body>
</html>
輸出
執行上述指令碼後，它將生成一個輸出，其中包含使用貝塞爾曲線繪製的曲線。
示例
您可以嘗試執行以下程式碼，使用 canvas 繪製貝塞爾曲線。
<!DOCTYPE HTML>
<html>
<head>
<style>
#test {
width: 100px;
height:100px;
margin: 0px auto;
}
</style>
<script>
function drawShape(){
// get the canvas element using the DOM
var canvas = document.getElementById('mycanvas');
// Make sure we don't execute when canvas isn't supported
if (canvas.getContext){
// use getContext to use the canvas for drawing
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(75,40);
ctx.bezierCurveTo(75,37,70,25,50,25);
ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
ctx.bezierCurveTo(20,80,40,102,75,120);
ctx.bezierCurveTo(110,102,130,80,130,62.5);
ctx.bezierCurveTo(130,62.5,130,25,100,25);
ctx.bezierCurveTo(85,25,75,37,75,40);
ctx.fill();
} else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}
</script>
</head>
<body id = "test" onload = "drawShape();">
<canvas id = "mycanvas"></canvas>
</body>
</html>
輸出
當用戶嘗試執行指令碼時，它將在網頁上顯示使用貝塞爾曲線繪製的心形影像。
更新於：2023年10月11日
619 次瀏覽
廣告