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

最新推荐文章于 2024-03-31 13:33:08 发布

fairycode

最新推荐文章于 2024-03-31 13:33:08 发布

阅读量2.1k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端踩坑蹚水小妹教程/探索文章标签： javascript css html html5 css3

本文链接：https://blog.youkuaiyun.com/fairycode/article/details/114397448

前端踩坑蹚水小妹同时被 2 个专栏收录

6 篇文章

订阅专栏

教程/探索

5 篇文章

订阅专栏

在构建个人网站时，作者挑战了一项视觉设计任务，即创建一条复杂的曲线。通过调整贝塞尔曲线的锚点来简化设计，将原本平滑但锚点混乱的曲线修正为方向统一且更易计算的形状。曲线由五段贝塞尔曲线拼接而成，放置在一个844*154的矩形内进行精确定位。这个过程展示了在HTML5、CSS3和JavaScript中运用图形设计技巧的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在做个人站，因为其实较码码来说，平时还是规划和设计类的职能更多一些
就考虑做一个展示型的站点，顺便也检查下自己的学习成果
主页的视觉这效果大致如下
在这里插入图片描述
其实总体来说布局是较为清晰的，四角+中间
中间分为左+右+下
难点其实是下部那条曲线，感谢@我教你跳伞咯帮忙
（为了方便其实已经修改过设计稿，原本绘制的锚点方向不统一，导致标准点坐标特别难计算）
变动如下
在这里插入图片描述
没修改的时候整体比较平滑圆润，但锚点杂乱（其实修改的更精细点也可以，但我比较糙汉）

修改后保留了整体的走向，使锚点方向统一可控
因为单段贝塞尔曲线的是由
【开始点】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>

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