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等),(博 ...
随机推荐
- docker 容器和镜像理解
1.镜像是Docker容器的基石,容器是镜像的运行实例,有了镜像才能启动容器.容器和镜像是一对一的,一个容器里就运行一个镜像. 1.base镜像----提供了一个基本的操作系统环境,用户可以根据需要安 ...
- RabbitMQ基本理论
本节内容 一 RabbitMQ介绍 二 RabbitMQ安装配置 三 RabbitMQ的Python实现-pika 1. 生产者消费者 2. 工作队列 3. 持久化和公平分发 4. 发布与订阅 ...
- 安卓Task和Back Stack
概述 一个Activity允许用户完成一些操作,甚至,Android中设计Activity为组件的形式,这样,多个Activity--甚至是其它App的Activity可以一起完成一项任务. Task ...
- Java中的代理机制
Java的三种代理模式 代理模式是一种设计模式,提供了对目标对象额外的访问方式,即通过代理对象访问目标对象,这样可以在不修改原目标对象的前提下,提供额外的功能操作,扩展目标对象的功能. 简言之,代理模 ...
- unity2d开发windows phone游戏按钮问题
今天在进行unity2d项目对windows phone工程的编译过程中,发现了一个很蛋疼的bug,windows phone编译运行后,GUILayout.Button出现自动点击的现象,这带来了很 ...
- 微信开发之获取openid及推送模板消息
有很多的朋友再问我怎么获取code,openid之类的问题,在这里我就给大家分享一下. 在做微信支付是需要获取openid的,推送模板消息也是需要openid包括其他一些功能分享等也都是需要的,ope ...
- 11-部署Heapster插件
配置和安装 Heapster 到 heapster release 页面 下载最新版本的 heapster. $ wget https://github.com/kubernetes/heapster ...
- “大话架构”阿里架构师分享Java程序员需要突破的技术要点
一.源码分析 源码分析是一种临界知识,掌握了这种临界知识,能不变应万变,源码分析对于很多人来说很枯燥,生涩难懂. 源码阅读,我觉得最核心有三点:技术基础+强烈的求知欲+耐心. 我认为是阅读源码的最核心 ...
- [原]ZolltyMVC框架简介
ZolltyMVC框架是一款轻量级的Java应用编程框架(Java Application Framework),融合了常用的IOC/DI.MVC(注解.XML配置式.RESTful风格.模型驱动.视 ...
- ubuntu下截图工具推荐 -- [deepin-scrot]
有时候我们需要在linux下截图来保存.如果你仅仅需要全屏截图的话其实可以直接按键盘上的PrScrn或者Press Print键盘按键来实现即可: 但是如果你需要对截图的图片进行标记.画个线画个圈加个 ...