您的位置：首页 > Web前端 > JavaScript
JS绘制数学函数图

2015-05-14 09:46 190 查看
<html>
<head>
<title>JS绘制数学函数图</title>
<style type="text/css">
body{
margin: 0px;
padding: 0px;
}
</style>
<script>
//辅助函数
function $(id){return document.getElementById(id)};
/**
* 绘图对象
* 包含各个绘图函数，比如画点，线段，多边形，圆等
* 和一些绘图参数，比如背景颜色，画笔颜色
**/
var Plot = {
//画布，所有被画出来的元素都append到这个container
container: null,
//原点x
ox: 500,
//原点y
oy: 300,
//坐标颜色
baseLineColor: 'black',
//画笔颜色
brushColor: 'red',
//画笔粗细
brushWeight: 1,
//baseLineX，baseLineY保存坐标线，用于坐标移位
baseLineX: null,
baseLineY: null,

//初始化方法，设置画布，原点位置，坐标线颜色，画笔颜色，画笔粗细
init: function(containerId, ox, oy, baseLineColor,brushColor,brushWeight){
if($(containerId)){
Plot.container = $(containerId);
}
else{
alert('You should specify an element in which you can draw plot!');
return;
}
if((typeof ox)=='number'){
Plot.ox = ox;
}
if((typeof oy)=='number'){
Plot.oy = oy;
}
Plot.baseLineColor = baseLineColor;
Plot.brushColor = brushColor;
Plot.brushWeight = brushWeight;
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函数曲线，传入角度，比如90，180，360
sin: function(angle){
for(var i=0; i<angle; i++){
Plot.drawDot(i,Math.sin(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(i/180*Math.PI)*50 );
}
},
//cos函数曲线，传入角度，比如90，180，360
cos: function(angle){
for(var i=0; i<angle; i++){
Plot.drawDot(i,Math.cos(i/180*Math.PI)*100);
}
},
//画线从(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('you should specify some dots to draw!');
return;
}
if(dots.constructor!=Array){
alert('you should specify some dots to draw!');
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>
</head>
<body>
<div id="main" style="border-bottom: solid red 0px; height:100%; width:100%">
</div>
</body>
<script>
//测试代码
Plot.init('main', 800, 500, 'green','red',1);
Plot.sin(720);
Plot.setBrushWeight(3);
Plot.cos(720);
Plot.setBrushWeight(2);
Plot.circle(100,200,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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签： JavaScript
相关文章推荐
新的分享
章节导航