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

html-css013

如何用HTML5技术画一条二维曲线,第1张

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

大家都知道，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

选数据区域——菜单栏——插入——图表——自定义类型：两轴线-柱图——下一步——下一步： 标题：输入相应标题；网络线：数值(Y)轴：主要网络线；图例：显示图例（取消勾选，你的抓图没有）；数据标志：值；数据表：显示数据表——完成。