使用js画图之正弦曲线

 更新时间:2015年01月12日 15:29:36   投稿:hebedich  
这篇文章主要介绍了使用js绘制几何图形的方法的系列文章,本文主要讲诉正弦曲线的绘制方法,需要的朋友可以参考下

数学式:y=Asin(ωx+φ)+k

样例:http://www.zhaojz.com.cn/demo/draw7.html

JS函数的声明:

复制代码 代码如下:

//画正弦曲线
//dot 原点
//amplitude    振幅 -- A
//initialPhase 初相 -- φ
//setover 偏距 -- k
//palstance 角速度 -- ω
//len 周期数
function drawSinusoid(dot, amplitude,initialPhase,palstance,setover, len, opts){
    var color = opts&&opts.color?opts.color:"DarkRed"; //曲线的颜色
    var max = len*2*Math.PI/w; //x的最大值
    //var x = -2*Math.PI/w/3;
    var x = 0; //x的初值
    var pre = [dot[0]+x, dot[1]+(amplitude*Math.sin(palstance*x+initialPhase)+setover)]; //y的初值
    for(;x < max;x+=5){ //每五个单位画一条线
        var cur = [dot[0]+x, dot[1]+(amplitude*Math.sin(palstance*x+initialPhase)+setover)];
        drawLine(pre, cur, {color: color}); // 画线
        pre = cur;
    }
    var d = Math.PI/(2*w);
    for(var x =0;x < max;x+=d){//描点
        var cur = [dot[0]+x, dot[1]+(amplitude*Math.sin(palstance*x+initialPhase)+setover)];
        drawPoint({
            pw:3,ph:3,color:'DarkRed',point: cur
        });
    }
   
    var pend = [dot[0]+max, dot[1]+(amplitude*Math.sin(palstance*max+initialPhase)+setover)];
    drawPoint({
        pw:3,ph:3,color:'DarkRed',point: pend
    });
    drawLine(pre, pend);
}

相关文章

  • 深入了解JavaScript 防抖和节流

    深入了解JavaScript 防抖和节流

    这篇文章主要介绍了JavaScript 防抖和节流,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • JS this关键字在ajax中使用出现问题解决方案

    JS this关键字在ajax中使用出现问题解决方案

    这篇文章主要介绍了JS this关键字在ajax中使用出现问题解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • JavaScript面向对象程序设计中对象的定义和继承详解

    JavaScript面向对象程序设计中对象的定义和继承详解

    这篇文章主要介绍了JavaScript面向对象程序设计中对象的定义和继承,结合实例形式详细分析了javascript面向对象程序设计中对象定义、继承、属性、方法、深拷贝等相关概念与操作技巧,需要的朋友可以参考下
    2019-07-07
  • JS动态修改iframe内嵌网页地址的方法

    JS动态修改iframe内嵌网页地址的方法

    这篇文章主要介绍了JS动态修改iframe内嵌网页地址的方法,涉及javascript动态修改iframe中src属性的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-04-04
  • 使用js在layui中实现上传图片压缩

    使用js在layui中实现上传图片压缩

    这篇文章主要介绍了使用js在layui中实现上传图片压缩,layui 是一款采用自身模块规范编写的前端 UI 框架,js上传图片压缩百度有很多方法,,需要的朋友可以参考下
    2019-06-06
  • jquery动态遍历Json对象的属性和值的方法

    jquery动态遍历Json对象的属性和值的方法

    下面小编就为大家带来一篇jquery动态遍历Json对象的属性和值的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • ES6新特性一: let和const命令详解

    ES6新特性一: let和const命令详解

    这篇文章主要介绍了ES6新特性中的let和const命令,结合实例形式分析了let和const命令的功能、使用方法与相关注意事项,需要的朋友可以参考下
    2017-04-04
  • 深入浅析javascript继承体系

    深入浅析javascript继承体系

    这篇文章主要介绍了javascript继承体系的相关资料,需要的朋友可以参考下
    2017-10-10
  • webpack 开发和生产并行设置的方法

    webpack 开发和生产并行设置的方法

    这篇文章主要介绍了webpack 开发和生产并行设置的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • JS解析XML实例分析

    JS解析XML实例分析

    这篇文章主要介绍了JS解析XML的方法,实例分析了javascript针对IE浏览器与非IE浏览器解析XML文件的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-01-01

最新评论