Canvas 绘制曲线

圆形

• www.alloyteam.com/2015/07/can…
• 默认椭圆可以用直接用canvas api
• developer.mozilla.org/zh-CN/docs/…
• 完整圆形点击之后用4条用bezierCurveTo绘制，一个控制点为0.6倍长，另一个为0.5倍宽，可以对调
• 不完整圆形，用N条曲线绘制
  • 大于1/2：8条
  • 大于1/4小于1/2:4条
  • 小于1/4：2条
• 难点1，如何把原来的4条曲线，拆分为N条，并保持弧度不变？
  • 可以利用曲线反推控制点这个公式，计算出某条曲线上的几分之一的两个控制点，
  • 利用计算好的新的两个控制点，只绘制曲线上几分之一
• 难点2：两条相连的曲线，如何绘制一条新的跨越两条的曲线？
  • 也是用曲线反推控制点这个公式。
  • tp1T = (getDecimal(lastT) + perPart * (1 / 4)) laseT = 1 - tp1T tp2T = perPart * (2 / 4) - laseT

贝塞尔曲线

• 原理
  • zh.javascript.info/bezier-curv…
  • www.zhihu.com/question/29…
  • pomax.github.io/bezierinfo/… -在线
  • jarenchow.github.io/JanvasExamp…
• 从贝塞尔曲线反推控制点
  • jermmy.github.io/2016/08/01/…
  • juejin.cn/post/699548…
• 贝塞尔曲线如何通过坐标反推出 t (时间)
  • www.zhihu.com/question/30…
  • juejin.cn/post/684490…
  • math.stackexchange.com/questions/5…
• 计算曲线与直线相交，直接用曲线公式与直线公式（y=k*x）联立求解出T，再根据T计算出曲线上的点，就是相交的点