基于js Canvas实现二次贝塞尔曲线
程序员文章站
2022-07-06 12:51:33
本文实例为大家分享了js canvas实现二次贝塞尔曲线的具体代码,供大家参考,具体内容如下
先上效果图:
实现代码:
本文实例为大家分享了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, 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坐标 * @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, 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坐标 * @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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。