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);
}
JS画几何图形之三【正弦曲线】的更多相关文章
- JS画几何图形之一【直线】
JS画图的想法经过大脑的时候,觉得有点意思,所以就实践了一番.JS画图为系列文章,本是讲点.线和面 先看样例:http://www.zhaojz.com.cn/demo/draw5.html 一.点 ...
- JS画几何图形之六【过直线外一点作垂线】
样例:http://www.zhaojz.com.cn/demo/draw10.html 依赖:[点].[直线] //过直线外一点画垂线 function drawVerticalLine(point ...
- JS画几何图形之五【过圆外一点作切线】
样例:http://www.zhaojz.com.cn/demo/draw9.html 依赖:[点].[直线].[圆] //画切线 //point 圆外的一点 //dot 圆心 //r 半径 func ...
- JS画几何图形之四【饼图】
饼图是将一个圆分割为多个扇形. 样例:http://www.zhaojz.com.cn/demo/draw8.html 依赖:[扇形] //饼图 //dot 圆点 //r 半径 //data 数据(一 ...
- JS画几何图形之二【圆】
半径为r的圆上的点p(x,y)与圆心O(x0,y0)的关系: x = x0+rcosA; y = y0+rsinA ,A为弧度 样例:http://www.zhaojz.com.cn/demo/dr ...
- 用JS画斐波那契螺旋线(黄金螺旋线)
偶然看到斐波那契螺旋线(黄金螺旋线)的定义及画图方法,试着用JS画了一下,很漂亮,很好玩 具体定义及画法大家查一下就有了,很简单. 以下是代码: <!DOCTYPE html> <h ...
- js画一棵树
用纯js画一棵树.思路: 1.一棵树的图片,作为页面背景: 2.通过html5中的canvas画布进行遮罩: 3.定时每隔10ms,从下往上清除1px的遮罩: <!DOCTYPE html> ...
- jquery.wordexport.js打印echarts.js画出的柱状图
jquery.wordexport.js打印echarts.js画出的柱状图. echarts画出的图是不能直接打印出来的(echarts的柱状图是用canvas画出来的),而jquery.worde ...
- 纯JS画点、画线、画圆的方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 带参数的Mixin
带参数的mixin 在Less中,还可以像函数一样定义一个带参数的mixin, 这种形式叫做 Parametric Mixin,即带参数的混入.如: // 定义一个样式选择器 .borderRadiu ...
- SSM框架的搭建
第一阶段: 1.用PowerDesign建数据模型,并导出SQL文件: 2.将SQL文件导入到MySQL客户端,建立表格: MySQL数据远程访问:GRANT ALL PRIVILEGES ON *. ...
- TCP/IP 协议 ----- 协议栈
文章是作者对tcp/ip协议族的一些看法,借鉴TCP/IP详解卷一的内容,进行总结归纳,并阐述自己的一些看法. TCP/IP协议栈· : 整个协议栈被分为了四层,每一层协议负责不同的功能: 链路层:负 ...
- PAT 1008. Elevator (20)
1008. Elevator (20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue The highest ...
- vs2015 制作安装包额外需要安装的软件VSI_bundle
vs2015 制作安装包额外需要安装的软件VSI_bundle 下载地址:http://files.cnblogs.com/files/sdner/VSI_bundle.rar
- C++11新特性应用--介绍几个新增的便利算法(不更改容器中元素顺序的算法)
总所周知.C++ STL中有个头文件,名为algorithm.即算法的意思. The header<algorithm>defines a collection of functions ...
- hdu5303Delicious Apples
题意大概就是有n框苹果放在长度为L的环上,每框有ai个苹果.你有一个容量为k的框.要你从0点处出发,随意走.框满了就回到0点把苹果放在那里.继续走直到把苹果都拿完为止.问你最少要走多少路程. 首先贪心 ...
- 浏览器正确理解和使用GBK及UTF-8(UTF-8 + BOM)网页编码
网页编码英文译为web page encoding.是在网页中指定其特定的字符编码格式的库. GBK是国家标准GB2312基础上扩容后兼容GB2312的标准. GBK的文字编码是用双字节来表示的.即不 ...
- Parcel.js + Vue 2.x 极速零配置打包体验
继 Browserify.Webpack 之后,又一款打包工具 Parcel 横空出世 Parcel.js 的官网有这样的自我介绍 “极速零配置Web应用打包工具” 简单接触了一下,单从效率上来说,确 ...
- class的二般用法
一般来说,class就是给一堆元素添加样式的,但是还有二般的用法,就是用来作为一个开关,来切换他的子孙元素的样式.举个例子: <ul> <li><span>1< ...