要實作bezier曲線的拼接首先要實作bezier曲線的繪制。繪制有兩個方法：
- 利用bezier曲線的定義寫算法，生成bezier曲線。
有興趣的同學可以進去看看：
[一次二次三次bezier曲線的計算方式及demo示範] (https://blog.csdn.net/cdnight/article/details/48494533)
- 直接利用HTML5中的canvas标簽，路徑裡有個bezierCurveTo方法，利用這個方法，隻要輸入四個控制點的坐标就能生成一條bezier曲線，非常簡單，是以我這裡用的就是這個方法。
有興趣的同學可以進去看看：
[bezierCurveto方法的用法] (http://www.w3school.com.cn/tags/canvas_beziercurveto.asp)
繪制兩條曲線之後就可以判斷條件進行拼接了
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bezier</title> <style type="text/css"> /*hidden透明邊框*/ #hh{ width: 1500px; height: 1500px; border: 1px solid hidden; } #cout{ width: 800px; height: 230px; border: 1px solid hidden; float: left; } .b{ width: 390px; height: 190px; border: 1px solid hidden; float: left; } #bd{ width: 800px; height: 25px; border: 1px solid hidden; position: absolute; left: 0px; top: 200px; } #huabu{ width: 1010px; height:1010px; border: 1px solid hidden; float: left; /* position: relative; left: 5px; top: 205px;*/ } /* #c2{ /* position: relative; left: 410px; top: 0px;*/ float: left; } */ </style>
</head>
<!--描出4個控制點-->
<body> <div id="hh">
<!--1、輸入資料-->
<div id="cout">
<div class="b">
<h3>第一條bezier曲線</h3>
起 點：<input maxlength="4" value="0" id="x1" />,<input maxlength="4" value="0" id="y1" /> <br />
第二點：<input maxlength="4" value="300" id="x2" />,<input maxlength="4" value="0" id="y2" /> <br />
第三點：<input maxlength="4" value="0" id="x3" />,<input maxlength="4" value="300" id="y3" /> <br />
終 點：<input maxlength="4" value="300" id="x4" />,<input maxlength="4" value="300" id="y4" /> <br />
<div align="center">
<input type="button" id="btn" value="路徑填充1" onclick="cs('x1','y1','x2','y2','x3','y3','x4','y4')" />
</div>
</div>
<div class="b">
<h3>第二條bezier曲線</h3>
起 點：<input maxlength="4" value="400" id="xx1" />,<input maxlength="4" value="400" id="yy1" /> <br />
第二點：<input maxlength="4" value="700" id="xx2" />,<input maxlength="4" value="400" id="yy2" /> <br />
第三點：<input maxlength="4" value="500" id="xx3" />,<input maxlength="4" value="300" id="yy3" /> <br />
終 點：<input maxlength="4" value="750" id="xx4" />,<input maxlength="4" value="800" id="yy4" /> <br />
<div align="center">
<input type="button" id="btnn" value="路徑填充2" onclick="cs2('xx1','yy1','xx2','yy2','xx3','yy3','xx4','yy4')" />
</div>
</div>
<!--拼接按鈕-->
<div id="bd" align="center" > <input type="button" id="bb" value="拼接"
onclick="tran('xx1','yy1','xx2','yy2','xx3','yy3','xx4','yy4','x4','y4','x3','y3')"
style="width: 125px;height: 25px;background-color: #00A3FF;color: white;border-radius: 8px;"/></div>
</div>
<!--2、定義兩塊畫布-->
<div id="huabu">
<div class="canvas" id="c1">
<canvas id="myCanvas" width="1000" height="1000" style="border:1px solid darkslategray;">
Your browser does not support the HTML5 canvas tag.</canvas>
</div>
<!-- <div class="canvas" id="c2">
<canvas id="myCanvass" width="400" height="400" style="border:1px solid dimgray;">
Your browser does not support the HTML5 canvas tag.</canvas>
</div>-->
</div>
</div>
<script>
function cs(x1, y1, x2, y2, x3, y3, x4, y4) {
var x1 = document.getElementById(x1).value;
var x2 = document.getElementById(x2).value;
var x3 = document.getElementById(x3).value;
var x4 = document.getElementById(x4).value;
var y1 = document.getElementById(y1).value;
var y2 = document.getElementById(y2).value;
var y3 = document.getElementById(y3).value;
var y4 = document.getElementById(y4).value; var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
//繪制四點
ctx.beginPath();
ctx.arc(x1,y1,2,0,2*Math.PI);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.arc(x2,y2,2,0,2*Math.PI);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.arc(x3,y3,2,0,2*Math.PI);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.arc(x4,y4,2,0,2*Math.PI);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.bezierCurveTo(x2, y2, x3, y3, x4, y4);
ctx.strokeStyle = "black";
ctx.stroke();/* ctx.beginPath();
ctx.moveTo(300, 200);
ctx.bezierCurveTo(10, 10, 320, 320, 400, 400);
ctx.strokeStyle = "yellowgreen";
ctx.stroke();*/ }
/*xx1, yy1, xx2, yy2, xx3, yy3, xx4, yy4*/
function cs2(xx1, yy1, xx2, yy2, xx3, yy3, xx4, yy4,x4,y4){
var xx1 = document.getElementById(xx1).value;
var xx2 = document.getElementById(xx2).value;
var xx3 = document.getElementById(xx3).value;
var xx4 = document.getElementById(xx4).value;
var yy1 = document.getElementById(yy1).value;
var yy2 = document.getElementById(yy2).value;
var yy3 = document.getElementById(yy3).value;
var yy4 = document.getElementById(yy4).value; var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
//繪制四個點
ctx.beginPath();
ctx.arc(xx1,xx1,2,0,2*Math.PI);
ctx.strokeStyle="red";
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.arc(xx2,yy2,2,0,2*Math.PI);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.arc(xx3,yy3,2,0,2*Math.PI);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.arc(xx4,yy4,2,0,2*Math.PI);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(xx1, yy1);
ctx.bezierCurveTo(xx2, yy2, xx3, yy3, xx4, yy4);
ctx.strokeStyle = "yellowgreen";
ctx.lineWidth="2";
ctx.stroke();
}
//拼接 按鈕id="bb" 函數：tran
function tran(xx1, yy1, xx2, yy2, xx3, yy3, xx4, yy4,x4,y4,x3,y3){
//alert('hello')
var x3 = document.getElementById(x3).value;
var y3 = document.getElementById(y3).value;
var x4 = document.getElementById(x4).value;
var y4 = document.getElementById(y4).value;
var xx1 = document.getElementById(xx1).value;
var xx2 = document.getElementById(xx2).value;
var xx3 = document.getElementById(xx3).value;
var xx4 = document.getElementById(xx4).value;
var yy1 = document.getElementById(yy1).value;
var yy2 = document.getElementById(yy2).value;
var yy3 = document.getElementById(yy3).value;
var yy4 = document.getElementById(yy4).value; var x=x4-xx1;
var y=y4-yy1;
var a=(y3-y4)/(x3-x4);
var b=(yy1-yy2)/(xx1-xx2);
if(a!=b){alert("拼接條件不滿足，不能進行拼接")}
else{
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(xx1, yy1);
ctx.bezierCurveTo(xx2, yy2, xx3, yy3, xx4, yy4);
ctx.strokeStyle = "hidden";
ctx.stroke();
ctx.beginPath();
ctx.translate(x,y);
ctx.moveTo(xx1, yy1);
ctx.bezierCurveTo(xx2, yy2, xx3, yy3, xx4, yy4);
ctx.lineWidth="2";
ctx.strokeStyle = "yellowgreen";
ctx.stroke();
}}
</script> </body></html>
第一篇部落格，這是一個課程設計題目，本來想到網上找的，無奈網上實在沒找到，後面隻好自己做，後面做的過程發現還蠻有趣的，特别是剛剛做完的那一瞬間，我感覺自己無所不能。許多地方也還有待完善 ，時間關系，就先這樣了。
good night 2018.12.31 0:41 天氣：大雪
![bezier曲線_貝塞爾曲線[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)