canvas bezierCurveTo() 三次貝塞爾曲線

admin發表於2019-08-29
Canvas

bezierCurveTo()方法可以繪製三次賽貝爾曲線。

可以結合繪製二次賽貝爾曲線學習，具體參閱canvas quadraticCurveTo()一章節。

二次賽貝爾曲線只能夠在一側彎曲，三次賽貝爾曲線可以在兩側彎曲，後面程式碼圖示演示。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

引數解析：

（1）.cp1x和cp1y：必需，第一個控制點座標。

（2）.cp2x和cp2y：必需，第二個控制點座標。

（3）.x和y：必需，結束點的座標。

圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201908/29/110023nypagm0jm6ogj9nj.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面是一個簡單三次賽貝爾曲線的示意圖，說明如下：

（1）.黑色曲線是真正要繪製的三次塞貝爾曲線，黃色是輔助線。

（2）.控制點1與開始點的連線與曲線相切。

（3）.控制點2與結束點的連線與曲線相切。

（4）.上述塞貝爾曲線並沒有和前文闡述的那樣，可以兩側彎曲，只有一個向下的彎曲。

（5）.這是因為控制點都在開始點與結束點連線的一側。

瀏覽器相容：

（1）.IE9+瀏覽器支援此方法。

（2）.edge瀏覽器支援此方法。

（3）.谷歌瀏覽器支援此方法。

（4）.火狐瀏覽器支援此方法。

（5）.Opera瀏覽器支援此方法。

（6）.Safari瀏覽器支援此方法。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
canvas {
  border:2px dotted red;
}
</style>
<script>
window.onload = () => {
  let canvas = document.getElementById("canvas");
  let range = document.getElementById("range");
  let ctx = canvas.getContext("2d");
  ctx.beginPath();
  ctx.moveTo(50,50);
  ctx.bezierCurveTo(20, 100, 200, 20, 200, 50);
  ctx.stroke();
    
  //輔助線
  ctx.beginPath();
  ctx.moveTo(50, 50);
  ctx.lineTo(200, 50);
  ctx.strokeStyle = "red";
  ctx.stroke();
  
  //輔助線
  ctx.beginPath();
  ctx.strokeStyle = "blue";
  ctx.moveTo(50, 50);
  ctx.lineTo(20, 100);
  ctx.moveTo(200, 50);
  ctx.lineTo(200, 20);
  ctx.stroke();
  
}
</script>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201908/29/110101bvx4wwexg7rp022m.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼繪製了一個兩側彎曲的三次塞貝爾曲線，簡單分析如下：

（1）.開始點與控制點1的連線與曲線相切。

（2）.結束點與控制點2的連線與曲線相切。

（3）.因為控制點分別在開始點與結束點連線的兩側，所以是兩側彎曲。

相關文章