`

用JS绘制正弦曲线

 
阅读更多
权当温习高中数学知识了。。。

正弦曲线的公式:y=Asin(ωx+φ)+k
x是x轴上的数值
y是y轴值
A振幅上下翻动的幅度。
(ωx+φ)相位,反映变量y所处的状态。
φ初相,x=0时的相位;反映在坐标系上则为图像的左右移动。
k偏距,反映在坐标系上则为图像的上移或下移。
ω角速度, 控制正弦周期(单位角度内震动的次数)。

例子很简单,就是让一张图片在屏幕上做一个正弦曲线的移动,代码如下

$(function() {
        var x = 0;
        var y = 0;
        var tt = setInterval(scrollImg, 10);
        function scrollImg() {
            var top = Math.abs(Math.sin(x)*50 + 100);
            var left = y;
            $(".holder").find('img').each(function() {
                var $this = $(this);
                $(this).css({"margin-top" : top + "px", "margin-left" : y + "px"});
                y = y + 1;
                x = (0.03) * y + 2;
            });
            if (y > 800)
                clearInterval(tt);
        }

});
分享到:
评论

相关推荐

    绘制正弦曲线

    在这个程序中,我们将会探讨如何使用编程语言来绘制正弦曲线。 首先,我们需要一个编程环境来实现这个功能。常见的选择有Python,它有一个强大的库叫做matplotlib,可以用来创建高质量的2D和3D图形。Python的简洁...

    绘制正弦曲线的源代码资源

    如果你对其他编程语言,如C++、Java或JavaScript有兴趣,绘制正弦曲线的方法也会有所不同,但基本思路相似:计算正弦值并使用相应的图形库进行可视化。例如,C++可以使用gnuplot,Java可以使用JFreeChart库,...

    纯js绘制直线,圆,正弦曲线等2(完整)

    绘制正弦曲线需要循环遍历x轴上的每个点,并计算对应的y值。可以使用`Math.sin()`函数获取正弦值,然后乘以适当比例并加上偏移量: ```javascript var xStep = 0.1; // x轴步长 for (var x = -10; x ; x += xStep) ...

    asp.net 绘制正弦曲线

    在“Example067-绘制正弦曲线”这个文件中,可能包含了ASP.NET的页面代码(.aspx)、C#后台代码(.cs)以及可能的样式表(.css)或JavaScript文件(.js)。这些文件协同工作,使得服务器能够计算出正弦函数的值,...

    纯js绘制直线,圆,正弦曲线等(不完整)

    **绘制正弦曲线**: 正弦曲线的绘制相对复杂,需要利用循环遍历x轴,计算每个点的y值,然后连接这些点。假设我们要绘制从-2π到2π的正弦函数: ```javascript ctx.beginPath(); for (var x = -Math.PI * 2; x * 2;...

    绘制正弦函数曲线.7z

    2. 图形库:使用编程语言的图形库,如Python的matplotlib或JavaScript的D3.js,创建坐标系并绘制点。 3. 连接点:将计算出的点用线段连接起来,形成连续的曲线。 压缩包内的“zgkdrawsin”可能是一个代码文件,包含...

    使用js画图之正弦曲线

    这个例子中,我们将讨论如何使用JavaScript来绘制正弦曲线。正弦曲线是数学中的一个基本概念,它由函数y=Asin(ωx+φ)+k描述,其中A是振幅,ω是角速度,φ是初相,k是偏移量。这些参数决定了正弦波的形状、位置和...

    绘制曲线图例子 正弦、余弦

    实现这样的功能通常需要编程知识,如Python的matplotlib库或JavaScript的D3.js库,这些库提供了丰富的图形绘制功能。开发者需要编写代码来生成曲线,绑定控件事件,以及处理用户输入以更新图形。 7. **文件名解析*...

    Javascript 绘制 sin 曲线过程附图

    在本文中,我们将详细介绍如何使用Javascript来绘制正弦曲线(sin曲线)。正弦曲线是数学中的一种常见波形,它在物理学、工程学以及各种科学领域中有着广泛的应用。在计算机图形学中,使用编程语言如Javascript,...

    正弦曲线作图

    在MATLAB之外,其他编程语言如Python的matplotlib库、R语言的ggplot2库或JavaScript的D3.js库也有类似的方法来绘制正弦曲线。关键在于理解和应用相应的函数库,生成合适的x值,然后调用绘图函数。 正弦曲线的绘制...

    类似任务管理器中的动态曲线绘制

    2. **图形库与框架**:实现动态曲线绘制,开发者可能会使用如matplotlib、Echarts、D3.js等数据可视化库。对于Python开发者,matplotlib提供强大的绘图功能,可以方便地创建动态曲线;JavaScript开发者则可能选择D3....

    绘制曲线y=Sin(x)

    4. **绘制正弦曲线**:绘制正弦曲线需要用到数学知识,尤其是三角函数。我们需要遍历x轴上的每个点,计算对应的y值,然后在Canvas上绘制这些点。假设我们想要在-π到π之间绘制曲线: ```javascript var step = (2 *...

    用动态的数据绘制出实时曲线

    标题“用动态的数据绘制出实时曲线”揭示了这个话题的核心,即如何利用实时更新的数据来创建动态变化的图形,以便观察数据随时间的变化趋势。 描述中提到这是“外国人写的代码”,暗示可能有一个源代码示例或库供...

    JS 动态绘制心跳图源码 html

    本文将深入探讨如何使用JS来动态绘制心跳图,一种能够模拟人体心跳过程的图表。这个话题结合了JavaScript编程、HTML基础以及可能涉及到的CSS样式调整。 首先,我们需要一个HTML页面作为画布。心跳图通常会利用`...

    JavaScript实现小球沿正弦曲线运动

    在本文中,我们将探讨如何使用JavaScript实现小球沿正弦曲线的运动。这是一个涉及到HTML、CSS和JavaScript三者结合应用的实例。首先,我们需要理解小球沿正弦曲线运动的基本概念,然后通过HTML和CSS来设定画布和小球...

    HTML5绘制体温单图例

    在这个"HTML5绘制体温单图例"的项目中,前端开发者利用JavaScript(js)来根据数据配置动态生成体温图表,这涉及到一系列的技术和算法。 首先,Canvas API是HTML5中的一个核心组成部分,它提供了一组JavaScript方法...

    1335显示正弦函数

    具体实现上,开发者可能会使用编程语言如Python的matplotlib库,JavaScript的D3.js库,或者是C++的OpenGL库来绘制正弦函数。这些库提供了函数接口,可以直接计算并绘制出精确的正弦曲线。首先,程序会生成一系列x值...

Global site tag (gtag.js) - Google Analytics