js sinx图像

最新推荐文章于 2023-01-12 22:15:04 发布
最新推荐文章于 2023-01-12 22:15:04 发布
阅读量1.1k 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/suninnight/archive/2012/08/22/2650545.html
版权
View Code 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML XMLNS:ELEMENT>
<html>
<head>
<title>::sin::</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style>
body{
    margin:0px;
}
#x{
    position:absolute;
    top:400px;
    left:0px;
    height:1px;
    width:1200px;
    background-color:black;
    overflow:hidden;
}
#x_arrow{
    position:absolute;
    top:389px;
    left:1195px;
    height:15px;
    width:15px;
}
#y{
    position:absolute;
    top:0px;
    left:400px;
    height:750px;
    width:1px;
    background-color:black;
    overflow:hidden;
}
#y_arrow{
    position:absolute;
    top:-1px;
    left:393px;
    height:15px;
    width:15px;
}
#o{
    position:absolute;
    top:415px;
    left:385px;
    height:15px;
    width:15px;
    font-size:18px;
}
input{    
    width:25px;
    height:30px;
    border:none;
    text-align:center;
}
#clean{
    width:25px;
    height:15px;
    background-color:#5f9fff;
    cursor:pointer;
    display:inline-block;
    text-align:center;
    font-weight:bold;
    line-height:15px;
}
</style>
</head>
<body>
<div>
<input type="text" id="pa" maxlength="5" />sin(<input type="text" id="pb" maxlength="5" />x + <input type="text" id="pc" maxlength="5" />) <button οnclick="show()">show</button> <div id="clean" style="color:white" >O</div>
</div>
<div id="x"></div>
<div id="y"></div>
<div id="x_arrow">▶</div><div id="y_arrow">▲</div>
<div id="o">O</div>
</body>
</html>

<script type="text/javascript">
var o_x = 400;
var o_y = 400;
var step = 0.01;
var points = 0;
var oFrag = document.createDocumentFragment();
var button = document.getElementById("clean");
var b = false;

(function(){
    var x = 0;
    var y = 0;
    while(x <= Math.PI * 4){
        y = Math.sin(x);
        draw(x,y);
        points++;
        x += step;
    }
    document.body.appendChild(oFrag);
    points = 0;
})();

button.onclick = function() {
    button.style.color = (button.style.color == "white")?((b = true) == true?"red":""):((b = false) == false?"white":"");
}


function show(){
    var x = 0;
    var y = 0;
    var pa = document.getElementById("pa").value;
    var pb = document.getElementById("pb").value;
    var pc = document.getElementById("pc").value;
    var tempx = 0;
    var tempx2 = 0;
    var tempy = 0;
    //clean
    if(b) {
        var aElms = document.getElementsByTagName("*");    
        for(var i = 0;i < aElms.length;i++){
            if(aElms[i].style.backgroundColor == "red" || aElms[i].style.backgroundColor == "blue") {
                document.body.removeChild(aElms[i]);
                i = 0;
            }
        }
    }
    //draw
    setTimeout(function(){
        while(x <= Math.PI * 4){
            y = Math.sin(x);
            if(pc != ""){
                tempx = x - pc / 50;
            } else {
                tempx = x;
            }
            if(pb != ""){
                tempx2 = tempx * (1 / pb);
            }else {
                tempx2 = tempx;
            }
            if(pa != ""){
                tempy = y * pa;
            } else {
                tempy = y;
            }
            draw(tempx2,tempy);
            points++;
            x += step;
        }
        document.body.appendChild(oFrag);
        points = 0;
    },300);
}

//draw -x , -y
function draw(x,y) { 
    var top = y * 50 * -1 + o_y;
    var left = x * 50 + o_x;
    var oDiv = document.createElement("div");
    oDiv.style.position = "absolute";
    oDiv.style.top = top + "px";
    oDiv.style.left = left + "px";
    oDiv.style.width = "1px";
    oDiv.style.height = "1px";
    oDiv.style.backgroundColor = "blue";
    oDiv.style.overflow = "hidden";
    if(points % 157 == 0){
        oDiv.style.overflow = "";
        oDiv.style.top = (top - 1) + "px";
        oDiv.style.left = (left - 1) + "px";
        //oDiv.innerHTML = "(" + top + "," + left + ")";
        oDiv.innerHTML = (points != 0)?(points <= 314)?(points % 314 != 0)?("π/" + 314 / points):("π"):(points % 314 != 0)?(points / 157 + "π/2"):(points / 314 + "π"):("");
        oDiv.style.width = "3px";
        oDiv.style.height = "3px";
        oDiv.style.backgroundColor = "red";
    }
    oFrag.appendChild(oDiv);
}
</script>

转载于:https://www.cnblogs.com/suninnight/archive/2012/08/22/2650545.html

weixin_33958585
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html链接到另一个html(画sinx的图像)
qq_44420246的博客
11-15 216
[注] 本文的所有程序，文件等都编写存放在腾讯云的centos系统上。 前提条件 申请腾讯云centos系统 安装配置httpd 如何安装配置可查看我的另一篇博客： 在腾讯云的centos系统上安装httpd,能远程访问centos系统中html文件和cgi文件的内容，并显示 安装好centos的httpd会产生一个文件路径，需要将html程序放在/var/www/html/路径下，这样才...
js实现正弦函数余弦函数图像
zp1996323的博客
09-21 6225
效果: 余弦图像 效果: 正弦图像 PS: 其实正弦与余弦道理完全一致(红点是div)以下是实现这个的代码<!DOCTYPE html> <html> <head> <meta charset="utf-8"></meta> <title>sin函数图像的实现</title> <style type="text/css">
Sinx画出正弦图像
06-04
画出x正半轴的正弦图像
sinx、cscx、cosx、secx以及tanx、cotx图像详解
weixin_54574988的博客
01-12 4万+
可以很形象的理解正割，余割，正弦，余弦这类名称的中文含义。
JavaScript中带有示例的Math.sin（）方法
cumubi7552的博客
07-07 660
JavaScript | Math.sin()方法 (JavaScript | Math.sin() Method) Math.sin() is a function in math library of JavaScript that is used to find the value of sine of a number and return the value in radians. ...
9. 设计二个函数分别计算sinx和cosx_如何计算增量测试覆盖率
weixin_39620684的博客
12-26 228
为了保证代码质量，一般会要求提交的源码要有测试用例覆盖，并对测试覆盖率有一定的要求，在实践中不仅会考核存量代码覆盖率（总体覆盖率）还会考核增量代码的覆盖率。或者说增量覆盖率更有实际意义，测试用例要随源码一并提交，实时保证源码的质量，而不是代码先行，测试用例后补，这有些应付的意思。对于存量代码覆盖率主流的测试工具（框架）都是默认支持的，配置reporter相关参数，执行完测试用例就会生成测试报告。对...
欧拉公式
热门推荐
Echo的专栏
04-29 14万+
欧拉公式（英语：Euler’s formula，又称尤拉公式）是在复分析领域的公式，将三角函数与复数指数函数相关联，因其提出者莱昂哈德·欧拉而得名。尤拉公式提出，对任意实数 xx，都存在: ejx=cosx+isinxe^{jx}=\cos{x}+i\sin{x} 其中jj是虚数单位。由上式，我们可以推导出： sinϕ=12j(ejϕ−e−jϕ)\sin{\phi}=\frac{1}{2j}(
高等数学：三角函数。反三角函数
Boki
11-22 3万+
三角函数，反三角函数
三角学——Sin函数图像_3
Tom的专栏
10-17 4万+
为理解正弦波，我们必须学习Sin、Cos、Tan函数的曲线图像。 假设我们有一个圆，并设有一个角为，角夹在x轴和单位圆的半径之间，半径与单位圆交点处的坐标为（x,y）。 我们对三角函数做了新的定义： 假设半径为1，得出： Sin = y Cos = x Tan = y/x = sin/cos 现在我们试着画出他们的曲线，那么我们先开始对Sin画出曲线，我们先绘制一个表格： ...
matlab曲线拟合
hezhiyao的博客
03-12 1万+
在运行MATLAB编程进行数据的处理过程当中，我们常常用到matlab曲线拟合，但是工具箱由于需要人工交互，得到的拟合结果，需要人工的去提取，再输入，所以，工具箱拟合结果十分不适合调用，以及继续下面的操作，所以我们需要用到matlab曲线拟合函数,并且以最常用的多项式拟合函数为例作为matlab曲线拟合例子，进行详细介绍。 工具/原料
js正弦函数图
dichen0168的博客
03-30 252
<!DOCTYPE html> <html> <head> <title>js画正弦函数图</title> <style type="text/css"> *{ margin:0; padding: 0; } .painter{ ...
《信号完整性分析》的读书笔记和总结
DBLLLLLLLL的博客
04-07 1万+
为了减少电源分布系统的电压轨道塌陷，就需要在电源和地之间加上多个去耦电容。
因特网，互联网，以太网，局域网的区别
conleyfree的博客
03-14 4万+
因特网，互联网，以太网，局域网的区别
H5 Canvas绘制三角函数图像
Blog for 明月依希
07-09 5335
三角函数sin、cos、tan、sinh、cosh、tanh js 的Math库，自带了许多常见函数方法，其中关于 三角函数的求解还是很齐全的，于是想到，利用canvas 绘制一个比较准确的 sin、cos、tan、sinh、cosh、tanh图像。 canvas绘制坐标轴 坐标轴由两条直线构成，直接将坐标定在中心点就好，这样容易绘制。同时为坐标的箭头定义边长。 //xy轴 ...
三角函数：图像和性质关系
羊羊的博客
02-27 2万+
紧接上一篇：http://blog.csdn.net/yinhun2012/article/details/79377728这次我们通过函数图文和unity程序来观察三角函数的图像，首先从基本的来：1. f（x） = sinx，为了函数图像的绘画，先建立xy直角坐标系，通过x的变值来计算f(x)的数值组成（a,b）坐标点，通过"线性函数"的性质，来"平滑"的连接这些（a，b）坐标点。（ps：线性代...
JS 中 Math 对象的【三角函数】的用法与实战例子【打靶游戏】 | Math.tan(), Math.cos(), Math.sin()
林洪炳的日常技术积累
04-21 3万+
如果用JS做前端的时候，就会发现跟 Math 类打交道比较少。但是如果用 Node.js 做后台，或用 JS 写游戏的时候，Math 类就会无处不在，尤其是 random()、round()、abs()、ceil()、floor() 等方法很常用。本篇文章就来说说Math 类中的 sin()、cos()、tan() 这三个中学时期的数学重点究竟在JS中怎么用。
javascript图形动画设计--画简单正弦波
weixin_30596735的博客
06-28 193
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Rotate to Mouse</title> <link rel="stylesheet" href="../include/style.cs...
[译]一种简单，快速，精准的sin/cos函数模拟，及as3实现
weixin_30867015的博客
03-20 374
看过第一篇的文章后，大呼过瘾！原文作者的思路非常简捷，有趣，偶英语比较差，欢迎指正，废话不多说看文章 原文出处： http://www.devmaster.net/forums/showthread.php?t=5784 http://lab.polygonal.de/2007/07/18/fast-and-accurate-sinecosine-approximation/ ...
Matlab 绘图画出y=sin(x)在[0,2*PI]上的图像
weixin_43794332的博客
04-18 1万+
画出y=sin(x)在[0,2PI]上的图像 手工作图 找点：x=0;x=pi/4,x=pi/2;x=3pi/4; 给出离散点列：x=[0:pi/10:2*pi] 计算函数值 y=sin(x) 画图：用二位绘图命令plot做出函数图像plot(x,y) x=[0:pi/10:2*pi]; y=sin(x); plot(x,y); ...
python绘制sinx图像
最新发布
05-18
要绘制sinx图像，我们可以使用Python的matplotlib库。以下是一个简单的代码示例： ```python import numpy as np import matplotlib.pyplot as plt x = np.linspace(-np.pi, np.pi, 100) # 定义x轴数据 y = np.sin(x) # 定义y轴数据 plt.plot(x, y) # 绘制sinx图像 plt.xlabel('x') # 设置x轴标签 plt.ylabel('sin(x)') # 设置y轴标签 plt.title('Sin(x) Function') # 设置图像标题 plt.show() # 显示图像 ``` 运行这段代码，就可以得到一个sinx图像。如果需要保存图像，可以使用`plt.savefig()`函数。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值