序

今天正在刷数学函数相关题目，刷到了下面这篇文章，哇哦～有意思。 利用cos和sin实现复杂的曲线。传送门在下面。

CSS 技巧一则 -- 在 CSS 中使用三角函数绘制曲线图形及展示动画

正巧在复习一些数学知识，遂动手实践了一把使用 数学中的函数  使用css画连续曲线。

函数: 第一步

在数学中 函数 是指 ，一组定义域通过一组表达式， 映射到一组值域，也就是说 函数 f(x) = x^2 表示一个集合，每个输入x，固定通过x^2返回一个值y，由此定义可得：

当集合 X = {-2, -1, 0, 1, 2}  输入到函数f，得到的值域集合 Y = { y | y >= 0 }。

我们也可以通过列表格，更直观的列举出函数的值：

当x = 1 时 y等于 1

当x = 2时 y等于 4

x= -2 -1 0 1 2 ...
y= 4 1 0 1 4 ...

由这个表格，我们可以在坐标轴画出关于y = f(x) = x^2的函数的样子：

开口控制

如果我们在y = x^2 加个负号会怎么样呢,y = f(x) = -(x ^ 2)

图像会倒过来变成像 n 这样的样子？

 就这样，我们可以通过这个函数，得到两种曲线，正的u 和 反的n。 那么问题来了，要画任意曲线，那么意味着，曲线要可大可小，可以在图中的任意一个位置，要怎么办呢？

嗯 仔细想想，如果函数 f(x) = x^2 再让它除以-2呢

f(x) = x^2 / -2

x= -2 -1 0 1 2 ...
y= -2 -1/2 0 -1 /2 -2 ...

手动画一下图像大约长下面这样：

y会因为除以2变得更小（想象一下两侧的y值会变小），当x = 2 ,  y就会等于2, 这样的结果是曲线变宽。

那么我们也可以知道 如果 换成 f(x) = x^2 * 2, 当x=2，y等于4，曲线会变窄。

如果除以的数变成了负数，开口就会向下。

由上面我们可以得到一个可以控制曲线开口大小的函数

也可以换算到 f(x) = x^2 / t 当t 大于0，曲线开口向上，t小于0，曲线开口向下

左右偏移控制

现在我们可以控制开口大小，那么怎么样控制曲线左右移动呢？

假设左右偏移量是P

设函数 f(x) = (x - P)^2，P = 1 得到下面的表格：

x= -2 - 1 -1 - 1 0 - 1 1 - 1 2 - 1 3 - 1
y= 9 4 1 0 1 4

还是用图像，大概长这样：

可以看到，P的取值影响图像的左右偏移

上下偏移控制

控制上下偏移，实际上就是控制函数 f(x) = x ^2的值y的大小，只需要将   f(x) = x ^2 - H  就可以控制上下啦

假设上下偏移量是H

设函数 f(x) = x^2 + H，H = 1 得到下面的表格：

x= -2  -1 
 0 
 1 
 2 
 ...
y= 5 2 1 2 4 ...

图就不画啦，可以直接看到x=0时，顶点已经不再0上了，向上偏移了1位

值域区间和宽度的关系

什么是区间

用集合的语言，我们定义各种区间为：
说人话就是有两种区间 开区间 与 闭区间
开区间不包含0，闭区间包含0
 
区间和宽度的关系
 
我们要一个完整的半圆｜半弧，那么必须要定义一个起始x和结束x，否则曲线就是无限延伸的没有意义
 
我们从函数f(x) = x^2的图像上任意取最小x a 和最大x b，b - a就是x的定义区间，也就是函数f(x) = x^2的定义域：

好了，理解了上面的东西，万事俱备，接下来就是更复杂一点的问题了！

接下来，工程问题，曲线

目标，使用函数

实现开头引用文章中，利用 cos和sin实现的曲线。

分析

通过上面对函数的分析我们可以得到一个式子：

设 抛物线开口 = T

设 左右偏移 = P

设 上下偏移 = H

设 定义域 = [a, b] （开区间a到开区间b）

函数 f(x) = (x - P) ^ 2 / T - H, T > 0 开口向上

函数g(x) = (x - P) ^ 2 / (T) - H, T < 0 开口向下

现在我们要使弧线A的结束点是弧线B的起始点，并且调换方向，那么：

如图的推理过程，首先反转A，将A向下移动H,再向左移动P，得到一个新的弧度，以此类推递归：

然后用js实现一个简单的算法如下：

  1.  // g(x) = f(x-(b-a)) - 2* f(a)， T < 0
  2. 　　　　　function g (x, T, P, range) {
  3.             const [a, b] = range
  4.             return f(x - (b - a), T, P, range) - 2 * f(0, T, P, range)
  5.         }
  6.  
  7. 　　　　　// 当 T < 0 相当于上面图中的 p(x) = (x - (- (T / B * f(b - a))))  / T， T < 0
  8.         // 当 T > 0 直接计算 f(x) = (x - P) ^ 2 / T, T > 0
  9.         function f (x, T, P, range, s) {
  10.             const [a, b] = range
  11.             if (T < 0 && !s) {
  12.                 return Math.pow(x - (-(T / b * f(b - a, T, P, range, true))), 2) / T
  13.             }
  14.             if (T > 0 || s) {
  15.                 return Math.pow(x - P, 2) / T
  16.             }
  17.  
  18.         }
  19.         // 选择初始函数
  20.         function getY (x, T, P, range) {
  21.             if (T > 0) {
  22.                 return f(x, T, P, range)
  23.             } else {
  24.                 return g(x, T, P, range)
  25.             }
  26.         }
  27.         //获取一堆x，y点组成的集合， size = 波浪数量，origin=原点，item = 配置P H T变量，points和ysize为递归存储数据
  28.         function GetPoints(size, origin, item, points = [], ysize) {
  29.             if (ysize === undefined) {
  30.                 ysize = size
  31.             }
  32.             if (size <= 0) {
  33.                 return points
  34.             }
  35.             const z = size % 2 === 0
  36.             const M = 1 // 密度
  37.             const width = item.b - item.a // 宽度
  38.             let i = width;
  39.             while (i >= -width) {
  40.                 const point = [
  41.                     (origin[0] + i) + (ysize - size) * (width * 2), // x
  42.                     origin[1] + getY(i, (z ? item.T : -item.T), item.P, [ // y
  43.                         item.a,
  44.                         item.b
  45.                     ])
  46.                 ]
  47.                 points.push(point)
  48.                 i -= M;
  49.             }
  50.             GetPoints(size-1, origin, {
  51.                 a: item.a,
  52.                 b: item.b,
  53.                 T: item.T,
  54.                 P: item.P
  55.             }, points, ysize)
  56.             return points;
  57.         }

效果

通过一连串懵逼式的计算和换算，我们有了一个可以获取固定数量相连的曲线，通过T控制开口，P控制x偏移，定义域[a,b]控制宽度,我们来实现骚操作：

拉到本地跑一跑：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style>
  9.         .circle {
  10.             position: absolute;
  11.             width: 1px;
  12.             height: 1px;
  13.             background: #333;
  14.             border-radius: 50%;
  15.             left: 0px;
  16.             top: 0px;
  17.             transition: all 200ms;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.     <div class="circle" id="circle"></div>
  23.     <script>
  24.         function g (x, T, P, range) {
  25.             const [a, b] = range
  26.             return f(x - (b - a), T, P, range) - 2 * f(0, T, P, range)
  27.         }
  28.  
  29.         function f (x, T, P, range, s) {
  30.             const [a, b] = range
  31.             if (T < 0 && !s) {
  32.                 return Math.pow(x - (-(T / b * f(b - a, T, P, range, true))), 2) / T
  33.             }
  34.             if (T > 0 || s) {
  35.                 return Math.pow(x - P, 2) / T
  36.             }
  37.  
  38.         }
  39.  
  40.         function getY (x, T, P, range) {
  41.             if (T > 0) {
  42.                 return f(x, T, P, range)
  43.             } else {
  44.                 return g(x, T, P, range)
  45.             }
  46.         }
  47.         function GetPoints(size, origin, item, points = [], ysize) {
  48.             if (ysize === undefined) {
  49.                 ysize = size
  50.             }
  51.             if (size <= 0) {
  52.                 return points
  53.             }
  54.             const z = size % 2 === 0
  55.             const M = 1 // 密度
  56.             const width = item.b - item.a // 宽度
  57.             let i = width;
  58.             while (i >= -width) {
  59.                 const point = [
  60.                     (origin[0] + i) + (ysize - size) * (width * 2), // x
  61.                     origin[1] + getY(i, (z ? item.T : -item.T), item.P, [ // y
  62.                         item.a,
  63.                         item.b
  64.                     ])
  65.                 ]
  66.                 points.push(point)
  67.                 i -= M;
  68.             }
  69.             GetPoints(size-1, origin, {
  70.                 a: item.a,
  71.                 b: item.b,
  72.                 T: item.T,
  73.                 P: item.P
  74.             }, points, ysize)
  75.             return points;
  76.         }
  77.  
  78.         /**
  79.          * 生成box-shadow参数
  80.          */
  81.         function getBoxShadow (color = '#333') {
  82.             let points = GetPoints(6, [500, 100], {
  83.                     a : 0,
  84.                     b : 100,
  85.                     T : 200,
  86.                     P : 0
  87.                 })
  88.  
  89.             // const s = []
  90.             const s = points.map((point) => `${point[0]}px ${point[1]}px 0 0 ${color}`)
  91.             return s.join(',')
  92.         }
  93.  
  94.         document.querySelector('#circle').style.cssText = `box-shadow: ${getBoxShadow()}; transform: rotate(90deg) translate(-500px, -500px)`
  95.  
  96.     </script>
  97. </body>
  98. </html>

一毛一样，大功告成。

展望

利用数学函数，我们也可以画出使用sin / cos一毛一样的曲线，更多的，我们也可以用它来描绘一个物体的运动动作，例如波浪运动，抛物线运动。

甚至可以用css画苦逼脸：

加点动画玩玩

延续

数学与编程，有时候真的是相依相承的东西。从工程的角度来说，数学和程序算法有非常重要的关系，推荐大家阅读《数学与泛型编程》（高效编程的奥秘），受益匪浅，感觉整个程序职业生涯有了一次很棒的升华！

完。

【前端】 在前端利用数学函数知识+box-shadow解波浪图形的更多相关文章

  1. [面试专题]前端需要知道的web安全知识

    前端需要知道的web安全知识 标签(空格分隔): 未分类 安全 [Doc] Crypto (加密) [Doc] TLS/SSL [Doc] HTTPS [Point] XSS [Point] CSRF ...

  2. Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行

      H1/H2/H3/H4标题标签常常使用在一个网页中唯一标题.重要栏目.重要标题等情形下. H1在一个网页中最好只使用一次,如对一个网页唯一标题使用.H2.H3.H4标签则可以在一个网页中多次出现, ...

  3. Myth – 支持变量和数学函数的 CSS 预处理器

    Myth 是一个预处理器,有点类似于 CSS polyfill .Myth 让你写纯粹的 CSS,同时还让你可以使用类似 LESS 和 Sass 的工具.您仍然可以使用变量和数学函数,就像你在其它预处 ...

  4. 【python游戏编程之旅】第四篇---pygame中加载位图与常用的数学函数。

    本系列博客介绍以python+pygame库进行小游戏的开发.有写的不对之处还望各位海涵. 在上一篇博客中,我们学习了pygame事件与设备轮询.http://www.cnblogs.com/msxh ...

  5. Web前端 Web前端和Web后端的区分

    一.绪论 1. 前台:呈现给用户的视觉和基本的操作. 后台:用户浏览网页时,我们看不见的后台数据跑动.后台包括前端.后端. 前端:对应我们写的html.css.javascript 等网页语言作用在前 ...

  6. 【函数】Oracle函数系列（2）--数学函数及日期函数

    [函数]Oracle函数系列(2)--数学函数及日期函数 1  BLOG文档结构图 2  前言部分 2.1  导读和注意事项 各位技术爱好者,看完本文后,你可以掌握如下的技能,也可以学到一些其它你所不 ...

  7. VB.NET函数——数学函数/字母串函数

    一.数学函数 函数 说明 Abs (num) 取绝对值. Exp (num) 返回以e为底.以num为指数的值,如Exp(2)返回e^2值. Log (num) 返回参数num的自然对数值,为Doub ...

  8. .net表达式计算器（中缀表达式转后缀表达式，支持20多个数学函数，支持函数嵌套）

    最近在网上查了一下表达工计算器的类库,发现Java版本的有一个比较成熟的叫W3EVal,好像是一个IBM工程师写的,.net就很少了(可能是我了解不够多),但投机取巧的实现思路有很多,比如: (1)将 ...

  9. Java开发笔记（十一）常见的数学函数

    前面介绍了Java编程的四则运算,虽然提供了基础的加减乘除符号,但是数学上还有其它运算符号,包括四舍五入用到的约等号≍.求绝对值的“| |”.开平方的“√￣”,这些运算符形态各异,而且并非ASCII码 ...

随机推荐

  1. SpringBoot注入配置文件的3种方法

    方案1:@ConfigurationProperties+@Component 定义spring的一个实体bean装载配置文件信息,其它要使用配置信息是注入该实体bean /** * 将配置文件中配置 ...

  2. java 时间戳 、时间差计算（秒、分钟、小时、天数、月份、年）

    以下代码就是时间差计算(秒.分钟.小时.天数.月份.年) package me.zhengjie; import java.text.ParseException; import java.text. ...

  3. Nexus安装(Windows)

    1. nexus下载 官网下载:https://www.sonatype.com/download-oss-sonatype 网盘下载:https://pan.baidu.com/s/1CXOW7Lv ...

  4. 货物移动BAPI：BAPI_GOODSMVT_CREATE报错提示“不能执行功能模块 MB_CREATE_GOODS_MOVEMENT”的原因

    在开发过程中,我们调用BAPI:BAPI_GOODSMVT_CREATE进行货物移动生成物料凭证时,出现了报错提示:“不能执行功能模块 MB_CREATE_GOODS_MOVEMENT”,如下图所示: ...

  5. SpringBoot集成JWT实现权限认证

    目录 一.JWT认证流程 二.SpringBoot整合JWT 三.测试 上一篇文章<一分钟带你了解JWT认证!>介绍了JWT的组成和认证原理,本文将介绍下SpringBoot整合JWT实现 ...

  6. C语言I博客作业07

    这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/SE2019-1/homework/9931 我在这个课程的目标 ...

  7. C/c.pp:贪心，二分答案

    说是贪心有点牵强. 其次,答案满足单调性,如果在k次操作能完成那么在k+1次操作内也能完成. 因为大不了你就把多的一次对方操作再进行一次就好了. 怎么操作呢? 我们从头扫这个序列,遇到每一个不匹配位置 ...

  8. m99 然而并没有想出来标题！

    这是放假回来的第一次考试,如同往常一样,我每逢放假回来第一次考试就会废掉,这次也不例外 这次不想粘成绩,因为实在是rp没了! 之前的几次都是别人在CE等等被lemon砍分,而我被lemon多测分. 但 ...

  9. CAP的学习和应用

    性能优化真言:队列缓存分布式  异步调优堆配置 前言:用CAP有一段时间了,这里简单记录一下,这么好用的东西,小伙伴们赶紧上车吧 一.CAP使用场景? 平时工作中经常使用到MQ,如(kafka,rab ...

  10. HTML——基础知识点1