HTML 畫布繪製貝塞爾曲線


要繪製貝塞爾曲線,請在 HTML 中使用 BezierCurveTo() 方法。我們首先來看看語法−

ctx.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

這裡,

  • cp1x − 表示第一個貝塞爾控制點的 x 座標
  • cp1y − 表示第一個貝塞爾控制點的 y 座標
  • cp2x − 表示第二個貝塞爾控制點的 x 座標
  • cp2y − 表示第二個貝塞爾控制點的 y 座標
  • x − 表示結束點 x 座標
  • y − 表示結束點 y 座標

以下是一個示例 −

示例

<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Tag</title>
</head>
<body>
<canvas id = "newCanvas" width = "550" height = "300" style = "border −2px solid blue;"></canvas>
<script>
   var c = document.getElementById('newCanvas');
   var ctx = c.getContext('2d');
   ctx.beginPath();
   ctx.moveTo(50, 20);
   ctx.bezierCurveTo(100, 150, 200, 100, 200, 50);
   ctx.stroke();
</script>
</body>
</html>

輸出

更新於: 16-Dec-2021

268 瀏覽

開啟你的 職業

透過完成課程進行認證

入門
廣告