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等),(博 ...
随机推荐
- Android核心技术Intent和数据存储篇
女孩:上海站到了? 男孩:嗯呢?走向世界~ 女孩:Intent核心技术和数据存储技术? 男孩:对,今日就讲这个~ Intent是各个组件之间用来进行通信的,Intent的翻译为"意图&quo ...
- ElasticSearch权威指南学习（索引管理）
创建索引 当我们需要确保索引被创建在适当数量的分片上,在索引数据之前设置好分析器和类型映射. 手动创建索引,在请求中加入所有设置和类型映射,如下所示: PUT /my_index { "se ...
- iptables概述
[参考文章]:iptables详解-朱双印个人日志 [参考文章]:linux iptables详解--个人笔记 [参考文章]:iptables详解--转 [参考文章]:linux下IPTABLES配置 ...
- linux上面是否有安装redis,redis启动
1.进入/usr/local/src目录,下载redis # cd /usr/local/src# wget http://download.redis.io/releases/redis-4.0.6 ...
- 惊艳，Dubbo域名已改，也不再局限于Java！
今天作者想去 Dubbo 官网查下相关资料,发现官方域名由 dubbo.io 直接跳转至 dubbo.apache.org 下了,然后突然回想起 Dubbo 已经在 2 月份正式进入了 Apache ...
- .NET手记-友盟消息推送服务器端加密算法的实现
最近为App开发消息推送功能,这里我们采用了友盟的消息推送服务,但其后台简陋,可定制化程度低,所以决定接入服务器端API,在自己的服务器上部署一套推送服务. 其中涉及到很多问题,首先要解决的就是与友盟 ...
- CSS基础和选择器
什么是CSS? CSS是指层叠样式表(Cascading Style Sheets),样式定义如何显示HTML元素,样式通常又会存在于样式表中.也就是说把HTML元素的样式都统一收集起来写在一个地方或 ...
- http协议返回码
有五种可能取值:1xx:指示信息--表示请求已接收,继续处理2xx:成功--表示请求已被成功接收.理解.接受3xx:重定向--要完成请求必须进行更进一步的操作4xx:客户端错误--请求有语法错误或请求 ...
- Xamarin.Android 调用本地相册
调用本地相册选中照片在ImageView上显示 代码: using System; using System.Collections.Generic; using System.Linq; using ...
- Spark之GraphX的Graph_scala学习
/* * Licensed to the Apache Software Foundation (ASF) under one or more * contributor license agreem ...