Bezier贝塞尔曲线探索（个人站）

最近在做个人站，因为其实较码码来说，平时还是规划和设计类的职能更多一些
就考虑做一个展示型的站点，顺便也检查下自己的学习成果
主页的视觉这效果大致如下

其实总体来说布局是较为清晰的，四角+中间
中间分为左+右+下
难点其实是下部那条曲线，感谢@我教你跳伞咯帮忙
（为了方便其实已经修改过设计稿，原本绘制的锚点方向不统一，导致标准点坐标特别难计算）
变动如下

没修改的时候整体比较平滑圆润，但锚点杂乱（其实修改的更精细点也可以，但我比较糙汉）

修改后保留了整体的走向，使锚点方向统一可控
因为单段贝塞尔曲线的是由
【开始点】1个
【标准点】可能有多个
【结束点】1个
构成的，所以整齐统一的锚点能降低很多工作量
图上我需要绘制的现段其实是由五段贝塞尔曲线拼接而成
拆解如图

曲线置于一个844*154的矩形中，以便计算相对的点位坐标

<script>
    //function draw() {
      //var canvas=document.getElementById('canvas');
      //var context=canvas.getContext('2d'); 
      //context.beginPath(); 
      context.moveTo(0,66); //蓝色起始点也就是开始绘制的位置
      context.quadraticCurveTo(133,1,225,1);//蓝色
      context.bezierCurveTo(317,1,493,92,519,92); //绿色
      context.bezierCurveTo(546,92,523,47,458,47); //黄色
      context.bezierCurveTo(395,47,626,153,711,153); //红色
      context.quadraticCurveTo(795,153,844,123);//紫色
      //可以用context.strokeStyle和context.fillstyle规定颜色
      //渐变其他可以考虑context.stroke
    }
  </script>

贝塞尔相关介绍点击此处。