本文實例為大家分享了js Canvas實現(xiàn)二次貝塞爾曲線的具體代碼，供大家參考，具體內(nèi)容如下
先上效果圖：
實現(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 起始點x坐標(biāo) * @param sy 起始點y坐標(biāo) * @param ex 結(jié)束點x坐標(biāo) * @param ey 結(jié)束點y坐標(biāo) * @param cx 控制點x坐標(biāo) * @param cy 控制點y坐標(biāo) * @param part 將起始點到控制點的線段分成的份數(shù)，數(shù)值越高，計算出的曲線越精確 */ 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; // 控制點到結(jié)束點的x和y每次的增量 var changeX2 = (ex - cx) / part; var changeY2 = (ey - cy) / part; for(var i = 0; i < part; i++) { // 計算兩個動點的坐標(biāo) var qx1 = sx + changeX1 * i; var qy1 = sy + changeY1 * i; var qx2 = cx + changeX2 * i; var qy2 = cy + changeY2 * i; // 計算得到此時的一個貝塞爾曲線上的點坐標(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)的，來個動態(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 起始點x坐標(biāo) * @param sy 起始點y坐標(biāo) * @param ex 結(jié)束點x坐標(biāo) * @param ey 結(jié)束點y坐標(biāo) * @param cx 控制點x坐標(biāo) * @param cy 控制點y坐標(biāo) * @param part 將起始點到控制點的線段分成的份數(shù)，數(shù)值越高，計算出的曲線越精確 * @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'); //繪制起始點、控制點、終點 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; // 控制點到結(jié)束點的x和y每次的增量 var changeX2 = (ex - cx) / part; var changeY2 = (ey - cy) / part; // 上次的點坐標(biāo) var lastX = sx; var lastY = sy; var i = 0; return function () { // 計算兩個動點的坐標(biāo) 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; // 從上次的點繼續(xù)畫 ctx.beginPath(); ctx.moveTo(lastX, lastY); ctx.lineTo(bx, by); ctx.stroke(); // 保存點坐標(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>以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點
疑難解答
