分段贝塞尔曲线

贝塞尔曲线的阶数过高,可能存在计算性能和控制点影响小的问题

分段贝塞尔曲线可以解决这个问题,只要解决分段处的平滑问题

直接放结论:当两侧控制点与分段交接点共线且形成的线段长度相等时,满足曲线平滑性质

即中间点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);
  
  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值