使用quadraticCurveTo()描繪2維的貝塞爾曲線，以前的座標點與當前座標點之間以2維貝塞爾曲線鏈接。參數cpx與cpy表示貝塞爾曲線的控制點座標，參數x，y爲新追加的座標點，指定的座標點都以canvas元素的左上端爲基準點。javascript
什麼是貝塞爾曲線
所謂的貝塞爾就是根據控制點算出的曲線，當須要曲線時通常使用貝塞爾曲線繪畫。php
quadraticCurveTo(cpx, cpy, x, y)方法由1個控制點與1個追加座標點繪製2維貝塞爾曲線。 context . bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)方法則是由2個控制點和1個追加座標點繪製3維貝塞爾曲線。
html
繪製2維貝塞爾曲線的步驟以下：
- 使用beginPath()方法宣佈開始繪畫路徑
- 使用moveTo(x,y)指定開始位置的座標
- 使用quadraticCurveTo(x,y)繪製2維貝塞爾曲線
- 使用stroke()方法表示路徑的輪廓
| 值 | 說明 | 實例 |
|---|---|---|
| cpx | 控制點的x座標值。 | |
| cpy | 控制點的y座標值 | |
| x | 從當前座標延伸2維貝塞爾曲線的x座標。 | |
| h | 從當前座標延伸2維貝塞爾曲線的y座標。 |
JavaScript:
var c=document.getElementById("myCanvas"); html5
var ctx=c.getContext("2d"); java
ctx.beginPath();web
context.moveTo(100,20);canvas
context.quadraticCurveTo(150,100);api
context.stroke();瀏覽器
| 值 | 說明 | 實例 |
|---|---|---|
| x | 繪製當前路徑開始點的x座標值。 | |
| y | 繪製當前路徑開始點的y座標值 |
使用HTML+JavaScript的方法，繪畫例
<!DOCTYPE html> spa
<html>
<head>
<meta charset="UTF-8">
<title>使用canvas繪製圖像</title>
<script type="text/javascript">
<!--
function test() {
//創建繪畫環境
var canvas = document.getElementById('sample1');
if (canvas.getContext) {
var context = canvas.getContext('2d');
//如下指定具體的繪畫內容
context.beginPath(); //開始新的路徑
context.moveTo(60,120);//路徑的開始位置的座標
context.quadraticCurveTo(150,20,250,100); //路徑的輪廓
context.stroke(); //顯示當前路徑的輪廓
}
}
//-->
</script>
</head>
<body onLoad="test()">
<h2>使用canvas繪製圖像</h2>
<canvas width="300" height="150" id="sample1" style="">
只有支持canvas元素的瀏覽器才能正常顯示圖像。
</canvas>
</body>
</html>