【前端】 在前端利用数学函数知识+box-shadow解波浪图形
发布日期:2021-05-09 09:33:27 浏览次数:15 分类:博客文章

本文共 6670 字,大约阅读时间需要 22 分钟。

���

��������������������������������������������������������������������������������������������� ������cos���sin���������������������������������������������

������������������������������������������������������������������ ������������������  ������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 - 1 - 1 - 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 
...
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������������������������������������

// g(x) = f(x-(b-a)) - 2* f(a)��� T < 0���������������function g (x, T, P, range) {            const [a, b] = range            return f(x - (b - a), T, P, range) - 2 * f(0, T, P, range)        }���������������// ��� T < 0 ������������������������ p(x) = (x - (- (T / B * f(b - a))))  / T��� T < 0         // ��� T > 0 ������������ f(x) = (x - P) ^ 2 / T, T > 0        function f (x, T, P, range, s) {            const [a, b] = range            if (T < 0 && !s) {                return Math.pow(x - (-(T / b * f(b - a, T, P, range, true))), 2) / T            }            if (T > 0 || s) {                return Math.pow(x - P, 2) / T            }                    }        // ������������������        function getY (x, T, P, range) {            if (T > 0) {                return f(x, T, P, range)            } else {                return g(x, T, P, range)            }        }        //������������x���y��������������������� size = ���������������origin=���������item = ������P H T���������points���ysize���������������������        function GetPoints(size, origin, item, points = [], ysize) {            if (ysize === undefined) {                ysize = size            }            if (size <= 0) {                return points            }            const z = size % 2 === 0            const M = 1 // ������            const width = item.b - item.a // ������            let i = width;              while (i >= -width) {                const point = [                    (origin[0] + i) + (ysize - size) * (width * 2), // x                    origin[1] + getY(i, (z ? item.T : -item.T), item.P, [ // y                        item.a,                        item.b                    ])                ]                points.push(point)                i -= M;            }            GetPoints(size-1, origin, {                a: item.a,                b: item.b,                T: item.T,                P: item.P            }, points, ysize)            return points;        }

 

������

���������������������������������������������������������������������������������������������������������������T���������������P������x������������������[a,b]������������,���������������������������

 ������������������������

    
Document

 

������������������������������

 

 

������

������������������������������������������������sin / cos���������������������������������������������������������������������������������������������������������������������������������������

���������������css���������������

 

 

������������������

 

������

���������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������

������

 

上一篇:干货满满-原来这才是hooks-React Hooks使用心得
下一篇:斩荆披棘,我们走的关于程序的路

发表评论

最新留言

很好
[***.229.124.182]2025年04月06日 23时19分05秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

python struct 官方文档 2021-05-10
中级软考 计算机指令执行过程(取指、分析、执行)计算机重叠流水线问题 2021-05-10
opencv cv::BorderTypes 像素外推方法(Pixel extrapolation method) 2021-05-10
摄像头捕获视频流软件AMCAP使用教程(视频采集捕获处理媒体制作微型软件) 2021-05-10
pytorch torch.item()(返回此张量的值作为标准Python数字。 这仅适用于具有一个元素的张量。) 2021-05-10
python 如何计算平方、次方?平方根、方根?(math.pow()、math.sqrt()) 2021-05-10
Docker镜像加速 2021-05-10
x射线和γ射线区别?α射线、β射线 2021-05-10
python 虚拟环境 virtualenv virtualenvwrapper的使用方法、命令 2021-05-10
jinja2 {{}} href 双大括号 2021-05-10
ubuntu无法安装vscode(visual studio code)如何卸载snap? 2021-05-10
VMware虚拟机:桥接、NAT、Host-only(仅主机)上网方式的区别 2021-05-10
python numpy.arange() 函数的使用方法 (在给定间隔内返回均匀间隔的值) 2021-05-10
Unity3D的InputField输入框控件按下Tab键光标自动切换 2021-05-10
C#实现对象为Json嵌套数组文件的创建 2021-05-10
静态数组类的封装(泛型) 2021-05-10
网络穿透/网络映射/远程运维EasyNTS智能云组网如何通过23端口穿透实现远程控制功能? 2021-05-10
【BUG修复】网络映射/端口穿透/视频组网服务EasyNTS上云网关代理前端数据无法解析问题 2021-05-10
CHIP-seq流程学习笔记(4)-call peak 软件macs2 2021-05-10
操作记录-2021-03-15: sunxiaoyu_project 2021-05-10