快捷導(dǎo)航

基于js Canvas實(shí)現(xiàn)二次貝塞爾曲線

更新時(shí)間：2018年12月25日 15:55:47 作者：Orange_J

這篇文章主要為大家詳細(xì)介紹了基于js Canvas實(shí)現(xiàn)二次貝塞爾曲線，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js Canvas實(shí)現(xiàn)二次貝塞爾曲線的具體代碼，供大家參考，具體內(nèi)容如下

先上效果圖：

實(shí)現(xiàn)代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>二次貝塞爾曲線</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
 body, h1{margin:0;}
 canvas{margin: 20px; }
</style>
</head>
<body>
 <h1>二次貝塞爾曲線</h1>
 <canvas id="canvas" width=600 height=600 style="border: 1px solid #ccc;"></canvas>
<script>
 /**
 * @param sx 起始點(diǎn)x坐標(biāo)
 * @param sy 起始點(diǎn)y坐標(biāo)
 * @param ex 結(jié)束點(diǎn)x坐標(biāo)
 * @param ey 結(jié)束點(diǎn)y坐標(biāo)
 * @param cx 控制點(diǎn)x坐標(biāo)
 * @param cy 控制點(diǎn)y坐標(biāo)
 * @param part 將起始點(diǎn)到控制點(diǎn)的線段分成的份數(shù)，數(shù)值越高，計(jì)算出的曲線越精確
 */
 function draw(sx, sy, ex, ey, cx, cy, part) {
 var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d'); 
 //繪制起始點(diǎn)、控制點(diǎn)、終點(diǎn) 
 ctx.beginPath();
 ctx.moveTo(sx, sy);
 ctx.lineTo(cx, cy);
 ctx.lineTo(ex, ey);
 ctx.stroke();
 
 // 繪制二次貝塞爾曲線
 ctx.beginPath();
 ctx.moveTo(sx, sy);
 // 起始點(diǎn)到控制點(diǎn)的x和y每次的增量
 var changeX1 = (cx - sx) / part;
 var changeY1 = (cy - sy) / part;
 // 控制點(diǎn)到結(jié)束點(diǎn)的x和y每次的增量
 var changeX2 = (ex - cx) / part;
 var changeY2 = (ey - cy) / part;
 
 for(var i = 0; i < part; i++) {
 // 計(jì)算兩個(gè)動(dòng)點(diǎn)的坐標(biāo)
 var qx1 = sx + changeX1 * i;
 var qy1 = sy + changeY1 * i;
 var qx2 = cx + changeX2 * i;
 var qy2 = cy + changeY2 * i;
 // 計(jì)算得到此時(shí)的一個(gè)貝塞爾曲線上的點(diǎn)坐標(biāo)
 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>

上面的是靜態(tài)的，來個(gè)動(dòng)態(tài)的看一看：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>二次貝塞爾曲線</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
 body, h1{margin:0;}
 canvas{margin: 20px; }
</style>
</head>
<body>
 <h1>二次貝塞爾曲線</h1>
 <canvas id="canvas" width=600 height=600 style="border: 1px solid #ccc;"></canvas>
<script>
 /**
 * @param sx 起始點(diǎn)x坐標(biāo)
 * @param sy 起始點(diǎn)y坐標(biāo)
 * @param ex 結(jié)束點(diǎn)x坐標(biāo)
 * @param ey 結(jié)束點(diǎn)y坐標(biāo)
 * @param cx 控制點(diǎn)x坐標(biāo)
 * @param cy 控制點(diǎn)y坐標(biāo)
 * @param part 將起始點(diǎn)到控制點(diǎn)的線段分成的份數(shù)，數(shù)值越高，計(jì)算出的曲線越精確
 * @param interval 畫圖的間隔
 * @return function 調(diào)用一次就向后畫一段曲線
 */
 function draw(sx, sy, ex, ey, cx, cy, part, interval) {
 var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d'); 
 //繪制起始點(diǎn)、控制點(diǎn)、終點(diǎn) 
 ctx.beginPath();
 ctx.moveTo(sx, sy);
 ctx.lineTo(cx, cy);
 ctx.lineTo(ex, ey);
 ctx.stroke();
 
 // 繪制二次貝塞爾曲線
 ctx.beginPath();
 ctx.moveTo(sx, sy);
 // 起始點(diǎn)到控制點(diǎn)的x和y每次的增量
 var changeX1 = (cx - sx) / part;
 var changeY1 = (cy - sy) / part;
 // 控制點(diǎn)到結(jié)束點(diǎn)的x和y每次的增量
 var changeX2 = (ex - cx) / part;
 var changeY2 = (ey - cy) / part;
 // 上次的點(diǎn)坐標(biāo)
 var lastX = sx;
 var lastY = sy;
 
 var i = 0;
 
 return function () {
 // 計(jì)算兩個(gè)動(dòng)點(diǎn)的坐標(biāo)
 var qx1 = sx + changeX1 * i;
 var qy1 = sy + changeY1 * i;
 var qx2 = cx + changeX2 * i;
 var qy2 = cy + changeY2 * i;
 // 計(jì)算得到此時(shí)的一個(gè)貝塞爾曲線上的點(diǎn)
 var bx = qx1 + (qx2 - qx1) * i / part;
 var by = qy1 + (qy2 - qy1) * i / part;
 // 從上次的點(diǎn)繼續(xù)畫
 ctx.beginPath();
 ctx.moveTo(lastX, lastY);
 ctx.lineTo(bx, by);
 ctx.stroke();
 // 保存點(diǎn)坐標(biāo)
 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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: