如何用HTML5技术画一条二维曲线

Posted 2023-04-13

参考技术A 最近项目中的设计图上有一条曲线设计风格，就想着能不用切图的方法实现吗？（毕竟切图好讨厌的 (≧▽≦)/ ）。就研究了一下实现方式。在此，给大家做一下参考。

大家都知道，CSS3中border已经可以实现一定的弧度。因此，就想着可以利用border的特性画一条曲线。

1.首先我们先建一个 div 元素

2.给它一些基本样式

最终效果：

从效果上看，这个方法实现的曲线过渡处不够平滑，仍存在较大缺陷。下面就介绍两个更加常用的方法。

在搜索实现方案的过程中，发现一个好用的 工具 ,可以用它来调试出复杂的曲线。根据设计稿的线条，很快就调试出来一个svg的路径参数。

接着，修饰一下该曲线，就能得到我们所需要的效果了。

最终效果如图：

发现Canvas真的是个好东西，可以用前端实现很多特效。当然画个曲线对于它来说，简直小菜一碟。
这里会用到贝塞尔曲线（bezierCurve)的一些知识。该曲线会利用到四个点作为定位点，分别为头和尾点还有两个控制点用来控制整个曲线的形状和曲率。具体可以参考 维基百科 上的相关介绍。

1.创建一个 canvas 元素

2.利用 bezierCurveTo 这个方法来画该曲线。由于这个方法相关参数难以确定，我同样选择了一个 工具 来获取所需要的具体参数数值。

至此，我们就得到了我们想要的曲线了。

How to Draw Quadratic Curves on an html5 Canvas
在线SVG编辑器
MDN SVG Tutorial

如何用origin绘制bode图

参考技术A 导入数据之后，bode图用第二列做X轴，第三列做Y轴
nyquist图用第一列做X轴，第四列作Y轴，相位角是1、5列 参考技术B 如何用origin绘图软件绘制对数坐标图_百度经验（仅供参考）：
http://jingyan.baidu.com/article/6525d4b15d1775ac7d2e9409.html