您好,登錄后才能下訂單哦!
本文實(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, h2{margin:0;} canvas{margin: 20px; } </style> </head> <body> <h2>二次貝塞爾曲線</h2> <canvas id="canvas" width=600 height=600 ></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, h2{margin:0;} canvas{margin: 20px; } </style> </head> <body> <h2>二次貝塞爾曲線</h2> <canvas id="canvas" width=600 height=600 ></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í)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。