本文實例為大家分享了js Canvas實現二次貝塞爾曲線的具體代碼，供大家參考，具體內容如下
先上效果圖：
實現代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>二次貝塞爾曲線</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
body, h2{margin:0;}
canvas{margin: 20px; }
</style>
</head>
<body>
<h2>二次貝塞爾曲線</h2>
<canvas id="canvas" width=600 height=600 ></canvas>
<script>
/**
* @param sx 起始點x坐標
* @param sy 起始點y坐標
* @param ex 結束點x坐標
* @param ey 結束點y坐標
* @param cx 控制點x坐標
* @param cy 控制點y坐標
* @param part 將起始點到控制點的線段分成的份數，數值越高，計算出的曲線越精確
*/
function draw(sx, sy, ex, ey, cx, cy, part) {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//繪制起始點、控制點、終點
ctx.beginPath();
ctx.moveTo(sx, sy);
ctx.lineTo(cx, cy);
ctx.lineTo(ex, ey);
ctx.stroke();
// 繪制二次貝塞爾曲線
ctx.beginPath();
ctx.moveTo(sx, sy);
// 起始點到控制點的x和y每次的增量
var changeX1 = (cx - sx) / part;
var changeY1 = (cy - sy) / part;
// 控制點到結束點的x和y每次的增量
var changeX2 = (ex - cx) / part;
var changeY2 = (ey - cy) / part;
for(var i = 0; i < part; i++) {
// 計算兩個動點的坐標
var qx1 = sx + changeX1 * i;
var qy1 = sy + changeY1 * i;
var qx2 = cx + changeX2 * i;
var qy2 = cy + changeY2 * i;
// 計算得到此時的一個貝塞爾曲線上的點坐標
var bx = qx1 + (qx2 - qx1) * i / part;
var by = qy1 + (qy2 - qy1) * i / part;
ctx.lineTo(bx, by);
}
ctx.stroke();
}
window.onload = function () {
draw(0, 0, 600, 0, 150, 450, 100);
};
</script>
</body>
</html>
上面的是靜態的，來個動態的看一看：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>二次貝塞爾曲線</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
body, h2{margin:0;}
canvas{margin: 20px; }
</style>
</head>
<body>
<h2>二次貝塞爾曲線</h2>
<canvas id="canvas" width=600 height=600 ></canvas>
<script>
/**
* @param sx 起始點x坐標
* @param sy 起始點y坐標
* @param ex 結束點x坐標
* @param ey 結束點y坐標
* @param cx 控制點x坐標
* @param cy 控制點y坐標
* @param part 將起始點到控制點的線段分成的份數，數值越高，計算出的曲線越精確
* @param interval 畫圖的間隔
* @return function 調用一次就向后畫一段曲線
*/
function draw(sx, sy, ex, ey, cx, cy, part, interval) {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//繪制起始點、控制點、終點
ctx.beginPath();
ctx.moveTo(sx, sy);
ctx.lineTo(cx, cy);
ctx.lineTo(ex, ey);
ctx.stroke();
// 繪制二次貝塞爾曲線
ctx.beginPath();
ctx.moveTo(sx, sy);
// 起始點到控制點的x和y每次的增量
var changeX1 = (cx - sx) / part;
var changeY1 = (cy - sy) / part;
// 控制點到結束點的x和y每次的增量
var changeX2 = (ex - cx) / part;
var changeY2 = (ey - cy) / part;
// 上次的點坐標
var lastX = sx;
var lastY = sy;
var i = 0;
return function () {
// 計算兩個動點的坐標
var qx1 = sx + changeX1 * i;
var qy1 = sy + changeY1 * i;
var qx2 = cx + changeX2 * i;
var qy2 = cy + changeY2 * i;
// 計算得到此時的一個貝塞爾曲線上的點
var bx = qx1 + (qx2 - qx1) * i / part;
var by = qy1 + (qy2 - qy1) * i / part;
// 從上次的點繼續畫
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(bx, by);
ctx.stroke();
// 保存點坐標
lastX = bx;
lastY = by;
i += 1;
if (i < part) {
setTimeout(arguments.callee, interval);
}
}
}
window.onload = function () {
var display = draw(0, 0, 600, 0, 150, 450, 200, 50);
display();
};
</script>
</body>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
