贝塞尔曲线的阶数过高,可能存在计算性能和控制点影响小的问题
分段贝塞尔曲线可以解决这个问题,只要解决分段处的平滑问题
直接放结论:当两侧控制点与分段交接点共线且形成的线段长度相等时,满足曲线平滑性质
即中间点p1.xy = (p0.xy + p2.xy) / 2
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.translate(10, 10); // 重新映射画布上的 (0,0) 位置,避免溢出
function drawCircle(x, y, color, r = 6) {
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(x, y, r, 0, 2 * Math.PI);
ctx.fill();
}
function drawPath(path) {
ctx.beginPath();
path.forEach((p, i) => {
if (i) {
ctx.lineTo(p.x, p.y);
} else {
ctx.moveTo(p.x, p.y);