canvas 二次貝塞爾曲線quadraticCurveTo()

admin發表於2018-08-09
Canvas
quadraticCurveTo()方法用來繪製曲線。

本章節只介紹一下此方法如何繪製曲線，而對於曲線彎曲的細節則是嚴謹的數學問題。

語法結構:

[JavaScript] 純文字檢視 複製程式碼
context.quadraticCurveTo(cpx,cpy,x,y);

引數解析:

（1）.cpx和cpy:必需，貝塞爾曲線控制點的座標。

（2）.x和y:必需，貝塞爾曲線結束點的座標。

圖示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201808/09/093834drrp69usz22qs22n.gif\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

特別說明:黑色曲線是真正繪製出的貝塞爾曲線，黃色是輔助線。開始點與控制點連線成一條線段，控制點又和結束點連線成一條線段；二次貝塞爾曲線兩端和兩條線段相切，通過移動控制點的座標可以繪製出不同的曲線。

程式碼例項如下:

[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=function(){
  var canvas = document.getElementById("canvas");
  var range = document.getElementById("range");
  var ctx = canvas.getContext("2d");
  ctx.beginPath();
  ctx.moveTo(20, 20);
  ctx.quadraticCurveTo(20, 100, 200, 20);
  ctx.stroke();
  ctx.closePath();
 
  ctx.beginPath();
  ctx.moveTo(20, 20);
  ctx.lineTo(20, 100);
  ctx.lineTo(200, 20);
  ctx.stroke();
  ctx.closePath();
 
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>

由於只有一個控制點，所以曲線只能在一側彎曲。

如果需要兩側都有彎曲的曲線參閱canvas bezierCurveTo()一章節。

相關文章