js 绘制数学函数
<!-- <!doctype html> -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js绘制数学函数</title>
</head> <body>
<div id="main" style="border-bottom:solid red 0px;height:100%;width:100%"></div>
</body> <script>
function $(id){return document.getElementById(id)};
/*
绘图对象
绘图函数，比如画点，线，多边形，圆
绘图参数，比如背景颜色，画笔颜色
*/
var Plot = {
container : null , //画布
ox : 500 , //原点x
oy : 300 , //原点y
baseLineColor : 'black' , //坐标轴颜色
brushColor : 'red' , //画笔颜色
brushWeight : 1 , //画笔粗细 baseLineX : null , // baseLineX 和 baseLineY 用于坐标移位
baseLineY : null , //初始化方法
init : function(containerId , ox , oy , baseLineColor , brushColor , brushWeight ){
if($(containerId)){
Plot.container = $(containerId);
}else{
alert('你必须制定一个区域作为画布！');
return;
}
if((typeof ox) == 'number'){
Plot.ox = ox ;
}
if((typeof oy)== 'number'){
Plot.oy = oy ;
}
Plot.baseLineColor = baseLineColor ;
Plot.brushWeight = brushWeight ;
Plot.brushColor = brushColor ;
Plot.drawCoordinate();
}, //设置原点函数
setOPoint : function(ox,oy){
Plot.ox = ox ;
Plot.oy = oy ;
Plot.container.removeChild(Plot.baseLineX) ;
Plot.container.removeChild(Plot.baseLineY) ;
Plot.drawCoordinate();
}, //设置画笔粗细函数
setBrushWeight : function(weight){
Plot.brushWeight = weight ;
},
setBrushColor : function(color){
Plot.brushColor = color ;
}, // 画坐标轴
drawCoordinate : function(){
var baseLineX = document.createElement('div') ;
baseLineX.style.position = 'absolute' ;
baseLineX.style.left = 0 ;
baseLineX.style.top = Plot.oy ;
baseLineX.style.fontSize = '1px' ;
baseLineX.style.height = '1px' ;
baseLineX.style.width = '100%' ;
baseLineX.style.overflow = 'hidden' ;
baseLineX.style.backgroundColor = Plot.baseLineColor ;
Plot.container.appendChild(baseLineX) ;
Plot.baseLineX = baseLineX ; var baseLineY = document.createElement('div') ;
baseLineY.style.position = 'absolute' ;
baseLineY.style.left = Plot.ox ;
baseLineY.style.top = 0 ;
baseLineY.style.fontSize = '1px' ;
baseLineY.style.height = '100%' ;
baseLineY.style.width = '1px' ;
baseLineY.style.overflow = 'hidden' ;
baseLineY.style.backgroundColor = Plot.baseLineColor ;
Plot.baseLineY = baseLineY ;
Plot.container.appendChild(baseLineY) ;
}, //清理画布
clean : function(){
Plot.container.innerHTML = '' ;
Plot.drawCoordinate() ;
}, //画点，相对原点
drawDot : function(x,y){
var dot = document.createElement('div') ;
dot.style.left = Plot.ox + x + 'px' ;
dot.style.top = Plot.oy - y + 'px' ;
dot.style.height = Plot.brushWeight ;
dot.style.width = Plot.brushWeight ;
dot.style.position = 'absolute' ;
dot.style.fontSize = '1px' ;
dot.style.backgroundColor = Plot.brushColor ;
dot.style.overflow = 'hidden' ;
Plot.container.appendChild(dot) ;
dot = null ; }, //sin函数，传入角度
sin : function(angle){
for(var i=0 ; i<angle ; i++){
Plot.drawDot(i,Math.sin(i/180*Math.PI)*100) ;
}
}, // cos函数，传入角度
cos : function(angle){
for(var i = 0 ; i < angle ; i++){
Plot.drawDot(i,Math.cos(i/180*Math.PI)*100)
}
}, //tan函数
tan : function(){
for(var i=0 ; i<720 ; i++){
if(Math.tan(i/180*Math.PI)*100>Plot.oy){
continue ;
}
Plot.drawDot(i,Math.tan(1/180*Math.PI)*50);
}
}, //画线 从 (x0,y0) 到 (x1,y1)
line : function(x0,y0,x1,y1){
// 竖线
if((x1-x0)==0){
for(var i=((y1>y0)?y0:y1) ; i<((y1>y0)?y1:y0); i++ ){
Plot.drawDot(x1,i);
};
return;
};
//横线
if((y1-y0)==0){
for( var i=((x1>x0)?x0:x1); i<((x1>x0)?x1:x0); i++ ){
Plot.drawDot(i,y1);
};
return;
};
//斜线
//K=斜率，直线方程 y=kx + b;
var k = (y1-y0)/(x1-x0) ;
if(k<=1){
for(var i=((x1>x0) ? x0 : x1); i<((x1>x0) ? x1 : x0 );i++){
Plot.drawDot(i,k*i+y1-k*x1);
};
}else{
for(var i=((y1>y0)?y0:y1) ; i<((y1>y0)?y1:y0) ; i++){
Plot.drawDot((i-y1+k*x1)/k,i) ; };
};
return;
}, // 画圆，radius是半径，（xi,yi）为圆心
circle : function(radius,xi,yi){
if((typeof xi)=='undefined'){
xi = 0 ;
};
if((typeof yi)=='undefined'){
yi = 0 ;
};
// 以i为角度,从0到360
var i = 0 ;
while(i<360){
var _x0 = Math.sin(i/180*Math.PI)*radius ;
var _y0 = Math.cos(i/180*Math.PI)*radius ;
var step = radius/100 ; // 使画出来的圆更圆润
if(1/step > 1){
step = 1 ;
}else if(1/step < 0.2){
step = 0.2 ;
}else{
step = 1/step ;
};
Plot.drawDot(_x0+xi,_y0+yi) ;
i = i + step ;
}
}, //画多边形
polygon : function(dots){
if(typeof dots == 'undefined'){
alert('你应该指定一些点画多边形') ;
return ;
};
if(dots.constructor != Array){
alert('你应该指定一些点画多边形') ;
return ;
};
for(var i = 0 ; i < dots.length-1 ; i++){
Plot.line(dots[i].x , dots[i].y , dots[i+1].x , dots[i+1].y);
if(i ==1 && dots.length==2){break;}
};
Plot.line(dots[0].x, dots[0].y, dots[dots.length-1].x, dots[dots.length-1].y);
},
}
</script> <!-- test -->
<script>
Plot.init('main',500, 500,'green','red',1);
Plot.sin(720);
Plot.setBrushWeight(3);
// Plot.cos(720);
// Plot.setBrushWeight(2);
// Plot.circle(200,100,100);
// Plot.setBrushColor('purple');
// Plot.circle(100,100,100);
// Plot.setBrushColor('blue');
// Plot.circle(50,100,100);
// var t = new Array();
// var dots = new Array();
// dots[0] = {x:-10,y:-10};
// dots[1] = {x:400,y:10};
// dots[2] = {x:400,y:300};
// dots[3] = {x:10,y:300};
// Plot.polygon(dots);
</script> </html>
原理：就是用1px*1px的点来画线和面
注意：文件的头部<!doctype html>必须被注释掉
效果图：
js 绘制数学函数的更多相关文章
- 教你如何绘制数学函数图像——numpy和matplotlib的简单应用
numpy和matplotlib的简单应用 一.numpy库 1.什么是numpy NumPy系统是Python的一种开源的数值计算扩展.这种工具可用来存储和处理大型矩阵,比Python自身的嵌套列表 ...
- Windows下绘制数学函数图像的方法
一.安装相关软件 在Windows中安装VirtualBox: 在VirtualBox中安装Ubuntu Server: 在Ubuntu Server中安装cifs-utils:sudo apt-ge ...
- Python 绘制你想要的数学函数图形
Python 非常热门,但除非工作需要没有刻意去了解更多,直到有个函数图要绘制,想起了它.结果发现,完全用不着明白什么是编程,就可以使用它完成很多数学函数图的绘制. 通过以下两个步骤,就可以进行数学函 ...
- 【前端】 在前端利用数学函数知识+box-shadow解波浪图形
序 今天正在刷数学函数相关题目,刷到了下面这篇文章,哇哦-有意思. 利用cos和sin实现复杂的曲线.传送门在下面. CSS 技巧一则 -- 在 CSS 中使用三角函数绘制曲线图形及展示动画 正巧在复 ...
- 如何使用matplotlib绘制一个函数的图像
我们经常会遇到这种情况,有一个数学函数,我们希望了解他的图像,这个时候使用python 的matplotlib就可以帮助我们. 用sigmoid函数来举个例子. sigmoid函数: 代码: impo ...
- 【python游戏编程之旅】第四篇---pygame中加载位图与常用的数学函数。
本系列博客介绍以python+pygame库进行小游戏的开发.有写的不对之处还望各位海涵. 在上一篇博客中,我们学习了pygame事件与设备轮询.http://www.cnblogs.com/msxh ...
- 利用d3.js绘制雷达图
利用d3,js将数据可视化,能够做到数据与代码的分离.方便以后改动数据. 这次利用d3.js绘制了一个五维的雷达图.即将多个对象的五种属性在一张图上对照. 数据写入data.csv.数据类型写入typ ...
- js中的函数，Date对象，Math对象和数组对象
函数就是完成某个功能的一组语句,js中的函数由关键字 function + 函数名 + 一组参数定义;函数在定义后可以被重复调用,通常将常用的功能写成一个函数,利用函数可以使代码的组织结构更多清晰. ...
- 应用wavesurfer.js绘制音频波形图小白极速上手总结
一.简介 1.1 引 人生中第一份工作公司有语音识别业务,需要做一个web网页来整合语音引擎的标注结果和错误率等参数,并提供人工比对的语音标注功能(功能类似于TranscriberAG等),(博 ...
随机推荐
- oracle-查询-时间条件查询
select * from 表名 where date =to_date('时间','yyyy-dd-mm');
- 还原是不可能还原的，这辈子都不可能还原（手动笑cry）
不好意思,我又把原厂避震换回border的绞牙了. 这套台湾绞牙已经陪伴了我第三个年头了,本次主要是调节了桶身高度,让车身升高了一下,现在是前面3指松将近4指.后面2指(以前是前面2指半.后面1指松2 ...
- 2019-4-25 html学习笔记
一.概念 文本 用于储存和记录文字信息的载体 html 超文本标记语言(本质就是给文本增加语义 如<h1></h1>就是给文字添加一级标题的语义) 注:互联网三大基石 有 ...
- javascript中的LHS和RHS
最近在拜读<你不知道的javascript>,接触到一个比较陌生的概念,LHS查询和RHS查询. 简单的一句话来讲,当变量出现在赋值操作符的左侧时进行LHS查询,出现在右侧时进行RHS查询 ...
- ArrayList源码解读笔记
简介: ArrayList是我们开发中非常常用的数据存储容器之一,其底层是数组实现的,我们可以在集合中存储任意类型的数据,ArrayList是线程不安全的,非常适合用于对元素进行查找,效率非常高. 线 ...
- list源码1(参考STL源码--侯捷):list节点、迭代器、数据结构
list源码1(参考STL源码--侯捷):list节点.迭代器.数据结构 list源码2(参考STL源码--侯捷):constructor.push_back.insert list源码3(参考STL ...
- SignalR 中使用 MessagePack 序列化提高 WebSocket 通信性能
It's like JSON.but fast and small. MessagePack is an efficient binary serialization format. It lets ...
- an error occurred attempting install_Github_for_windows_无法安装的解决方法_
都在这了,作者原创.我就截图好了.
- Android_注解+反射代替findViewById()
最近没啥事,前段时间看到一个框架是使用的注解来代替findViewById()的然后就研究了,发现还是蛮容易的,下面就是注解的代码: import java.lang.annotation.Docum ...
- 死锁排查的小窍门 --使用jdk自带管理工具jstack
本文版权归 远方的风lyh和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 开发时间久了,难免会写出一些一些死锁的代码,自己明明调用该方法可该方法就是不执行.不进该方法.日志也不打 ...