首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【CSS】1140- Canvas 制作水波图实现原理

这里我选择了正弦曲线来实现。 在讲实现思路之前,我们来回忆一下正弦曲线的基础。...正弦曲线 正弦曲线公式:y = A sin(Bx + C) + D 振幅是 A,A 值越大,曲线更陡峭: 周期是 2π/B,B 值大于 1 时,B 值越大,周期越短,B 值小于 1 大于 0 时,周期变长...: 相移是 −C/B,在 B 不变的情况,C 为正值时,曲线向左移动,C 为负值时,曲线向右移动: 垂直位移是 D,控制曲线上下移动: 实现思路 了解了正弦曲线的一些属性,我们可以把这些属性来控制波浪...前面如果有留意的话,会发现 正弦曲线 y 坐标的计算,最后会加上 canvasHeight / 2 ,其实这里就是设置水位了。...在动画效果上除了正弦曲线的水平移动,我们加上水位上升的动效: componentDidMount() { ...

86120
您找到你想要的搜索结果了吗?
是的
没有找到

用 Shader 写个完美的波浪~

整体思路 看到波浪的表现特点我第一时间想到的就是正弦曲线(或者说是正弦波,又让我想起了示波器)。 ?正弦曲线(Sinusoid) 「正弦曲线」是三角函数中的一种正弦(Sine)比例的曲线。...正弦曲线表现为一条波浪线,形状犹如海上完美的波浪。 标准的正弦函数公式为: 正弦函数属于周期函数,其值域为 [-1, 1]。 如下图就是一个纯正标准的正弦曲线: ?...而一般我们常用的正弦曲线公式为: 这条公式比标准公式多了几个常数,含义如下: A:「振幅(Amplitude)」,曲线最高点与最低点的差值,表现为曲线的整体高度 ω:「角速度(Angular Velocity...但是由于正弦曲线的周期性特点,曲线的这种形态变化看起来像是曲线进行了位移。 改变曲线的垂直位置 我们可以调整常数 k(偏距)来改变曲线的垂直位置: ? ?...动手实现 明白了正弦曲线的特性之后,接下来我们需要做的就是在代码中运用正弦函数。 慢着!正弦曲线确实如海上完美的波浪般优美,但是正弦曲线是静态的,我们要的波浪是动态的啊! ?如何让曲线动起来 别慌!

1.7K10

统治世界的 10 大算法,你知道几个?

傅立叶变换与快速傅立叶变换 傅立叶是一位法国数学家和物理学家,原名是JeanBaptiste Joseph Fourier(1768-1830), Fourier于1807年在法国科学学会上发表了一篇论文,论文里描述运用正弦曲线来描述温度分布...,论文里有个在当时具有争议性的决断:任何连续周期信号都可以由一组适当的正弦曲线组合而成。...拉格朗日是对的:正弦曲线无法组合成一个带有棱角的信号。但是,我们可以用正弦曲线来非常逼近地表示它,逼近到两种表示方法不存在能量差别,基于此,傅立叶是对的。为什么我们要用正弦曲线来代替原来的曲线呢?...用正余弦来表示原信号会更加简单,因为正余弦拥有原信号所不具有的性质:正弦曲线保真度。一个正余弦曲线信号输入后,输出的仍是正余弦曲线,只有幅度和相位可能发生变化,但是频率和波的形状仍是一样的。

71310

搞算法的我们,不知道这些算法怎么行

傅立叶变换与快速傅立叶变换 傅立叶是一位法国数学家和物理学家,原名是JeanBaptiste Joseph Fourier(1768-1830), Fourier于1807年在法国科学学会上发表了一篇论文,论文里描述运用正弦曲线来描述温度分布...,论文里有个在当时具有争议性的决断:任何连续周期信号都可以由一组适当的正弦曲线组合而成。...拉格朗日是对的:正弦曲线无法组合成一个带有棱角的信号。但是,我们可以用正弦曲线来非常逼近地表示它,逼近到两种表示方法不存在能量差别,基于此,傅立叶是对的。 为什么我们要用正弦曲线来代替原来的曲线呢?...用正余弦来表示原信号会更加简单,因为正余弦拥有原信号所不具有的性质:正弦曲线保真度。一个正余弦曲线信号输入后,输出的仍是正余弦曲线,只有幅度和相位可能发生变化,但是频率和波的形状仍是一样的。

95381

【STM32F429的DSP教程】第24章 DSP变换运算-傅里叶变换

,论文里有个在当时具有争议性的决断:任何连续周期信号可以由一组适当的正弦曲线组合而成。...拉格朗日是对的:正弦曲线无法组合成一个带有棱角的信号。但是,我们可以用正弦曲线来非常逼近地表示它,逼近到两种表示方法不存在能量差别,基于此,傅里叶是对的。...用正余弦来表示原信号会更加简单,因为正余弦拥有原信号所不具有的性质:正弦曲线保真度。一个正弦曲线信号输入后,输出的仍是正弦曲线,只有幅度和相位可能发生变化,但是频率和波的形状仍是一样的。...且只有正弦曲线才拥有这样的性质,正因如此我们才不用方波或三角波来表示。...但是对于非周期性的信号,我们需要用无穷多不同频率的正弦曲线来表示,这对于计算机来说是不可能实现的。

80430

【STM32H7的DSP教程】第24章 DSP变换运算-傅里叶变换

,论文里有个在当时具有争议性的决断:任何连续周期信号可以由一组适当的正弦曲线组合而成。...拉格朗日是对的:正弦曲线无法组合成一个带有棱角的信号。但是,我们可以用正弦曲线来非常逼近地表示它,逼近到两种表示方法不存在能量差别,基于此,傅里叶是对的。...用正余弦来表示原信号会更加简单,因为正余弦拥有原信号所不具有的性质:正弦曲线保真度。一个正弦曲线信号输入后,输出的仍是正弦曲线,只有幅度和相位可能发生变化,但是频率和波的形状仍是一样的。...且只有正弦曲线才拥有这样的性质,正因如此我们才不用方波或三角波来表示。...但是对于非周期性的信号,我们需要用无穷多不同频率的正弦曲线来表示,这对于计算机来说是不可能实现的。

72210

【STM32F407的DSP教程】第24章 DSP变换运算-傅里叶变换

,论文里有个在当时具有争议性的决断:任何连续周期信号可以由一组适当的正弦曲线组合而成。...拉格朗日是对的:正弦曲线无法组合成一个带有棱角的信号。但是,我们可以用正弦曲线来非常逼近地表示它,逼近到两种表示方法不存在能量差别,基于此,傅里叶是对的。...用正余弦来表示原信号会更加简单,因为正余弦拥有原信号所不具有的性质:正弦曲线保真度。一个正弦曲线信号输入后,输出的仍是正弦曲线,只有幅度和相位可能发生变化,但是频率和波的形状仍是一样的。...且只有正弦曲线才拥有这样的性质,正因如此我们才不用方波或三角波来表示。...但是对于非周期性的信号,我们需要用无穷多不同频率的正弦曲线来表示,这对于计算机来说是不可能实现的。

81410

统治世界的 10 大算法,你知道几个?

傅立叶变换与快速傅立叶变换 傅立叶是一位法国数学家和物理学家,原名是JeanBaptiste Joseph Fourier(1768-1830), Fourier于1807年在法国科学学会上发表了一篇论文,论文里描述运用正弦曲线来描述温度分布...,论文里有个在当时具有争议性的决断:任何连续周期信号都可以由一组适当的正弦曲线组合而成。...拉格朗日是对的:正弦曲线无法组合成一个带有棱角的信号。但是,我们可以用正弦曲线来非常逼近地表示它,逼近到两种表示方法不存在能量差别,基于此,傅立叶是对的。 为什么我们要用正弦曲线来代替原来的曲线呢?...用正余弦来表示原信号会更加简单,因为正余弦拥有原信号所不具有的性质:正弦曲线保真度。一个正余弦曲线信号输入后,输出的仍是正余弦曲线,只有幅度和相位可能发生变化,但是频率和波的形状仍是一样的。

59920

浅析傅里叶分析

傅里叶分析的起源 傅里叶是一位法国数学家和物理学家,他在1807年在法国科学学会上发表了一篇论文,论文里描述运用正弦曲线来描述温度分布,论文里有个在当时具有争议性的决断:任何连续周期信号都可以由一组适当的正弦曲线组合而成...拉格朗日的观点是:正弦曲线无法组成一个带有棱角的信号。这是对的,但是,我们却可以用正弦信号来非常逼近地表示它,逼近到两种方法不存在能量差异,这样来理解的话,那傅里叶是正确的。 如何表示的?...傅里叶在这里所提出的,任何连续周期信号都可以用一组连续的正弦曲线组合而成,是怎么一个表示法呢,我们用一个例子来进行说明: ?

1K10

5-3 绘制图形

案例学习:绘制正弦曲线y=sin(x) 本次实验目标是掌握绘制曲线的基本要领,可以在任意窗体或控件上找到各相关点,计算绘制曲线,以正弦曲线为例,首先应找到坐标原点,然后找到每一个曲线上的对应点的坐标,在两点之间画一条直线...u 实验步骤(3): 接着在坐标轴上画出正弦曲线,以坐标轴的原点为起点 ?...图5-8 正弦曲线 u 实验步骤(4): 因为窗体中纵坐标的正方向是垂直向下的,和我们在数学中画坐标轴的方向相反,因此,需对纵坐标的值做一些修改。...因为直接根据y=sinx中的x范围画图,画出的正弦曲线很窄,x取值范围是从0-2 为一个周期,也就是几个像素,因此需将曲线放宽,通过改变横坐标来完成。

1.5K10
领券