canvas构建一个平面直角坐标系
功能：
1：可设置只显示某个象限（onlyQuadrant）
2：可设置刻度大小（setCalibration）
3：可设置放大比例（setProportion）
可调用的方法（包括上面3个）：
向坐标系打印一点 （printPoint）
在坐标画一条直线（printLine）
设置下一画笔的填充色（setFillColor）
设置下一画笔的边框色（setStrokeColor）
获取某个坐标的真实x坐标（getx）
获取某个坐标的真实y坐标（gety）
例子：http://jun-lu.github.com/jun/canvas_sin_cos_tan.html
源码：https://github.com/jun-lu/jun/blob/master/src/FlatSystem.js
/** 平面直角坐标系类 可以轻松在一块画布上画出平面直角坐标系，可设置宽度，高度，绘制比例，以及单位刻度 构造函数 : FlatSystem context： 画布的2d上下文 width：绘制的最大宽度 height：绘制的最大高度 属性设置： this.calibration=30 //刻度 可通过 setCalibration(number) 设置 ,这个方法也是对外API之一 this.proportion=2 //绘制比例 可通过 setProportion(number) 设置这个方法也是对外API之一 api: setCalibration(number);// 设置坐标系刻度 setProportion();// 设置坐标系绘制比例 init();//在画布上画出坐标系，如果在init之前没有设置刻度和绘制比例会使用默认的值 clear(x,y,width,height)//清除画布的某块区域，如果不传递任何值会清空全部画布 */ function FlatSystem(context, width, height){ this.context = context; this.width = width; this.height = height; this.calibration = 20;//刻度 this.proportion = 2;//绘制比例 this.jx = this.width/2; //0坐标点的x位置 this.jy = this.height/2; //0坐标点的y位置 //this.init(); } FlatSystem.prototype = { constructor:FlatSystem, init:function(){ this.context.clearRect(0,0,this.width, this.height); //this.width *= this.proportion; //this.height *= this.proportion; this.context.moveTo(0,0); this.setFillColor("#000"); this.setStrokeColor("#000"); this.build(); }, clear:function(x, y, width, height){ this.context.clearRect(x ||0,y || 0,width || this.width, height || this.height); }, setProportion:function(proportion){//整数 this.proportion = proportion; }, setCalibration:function(calibration){ this.calibration = calibration;//刻度 }, onlyQuadrant:function(quadran){//显示某一象限 1， 2， 3， 4 if(quadran == 0){ this.jx = this.width/2; this.jy = this.height/2; } if(quadran == 1){ this.jx = 50; this.jy = this.height-50; } if(quadran == 2){ this.jx = this.width - 50; this.jy = this.height - 50; } if(quadran == 3){ this.jx = this.width -50; this.jy = 50; } if(quadran == 4){ this.jx = 50; this.jy = 50; } }, /** 在坐标系统打印一个点 x 轴坐标 y 轴坐标 width 点的宽度 height 点的高度 */ printPoint:function(x,y,width,height){//默认点阵宽度2 x = this.getx(x); y = this.gety(y); if(x < this.width && y < this.height){ this.drawRect(x, y, width || 2, height || 2); return true; } return false; }, /*** 在坐标系中画一条直线（线段） x 线段结束点 x坐标 y 线段结束点 y坐标 sx 线段开始点 x坐标 可选 不传递将会使用上次画笔结束点 sy 线段开始点 y坐标 可选 */ printLine:function(x, y, sx, sy){ this.drawLine(this.getx(x), this.gety(y), this.getx(sx),this.gety(sy)); }, /** 设置填充色 */ setFillColor:function(color){ this.context.fillStyle = color; }, /** 设置边框色 */ setStrokeColor:function(color){ this.context.strokeStyle = color; }, /** 非公开 */ drawRect:function(x,y,width, height){ this.context.beginPath(); this.context.fillRect(x-width/2, y-height/2, width, height); this.context.stroke(); }, /*** 非公开 在画布打印一个点，坐标为真实开始坐标和结束坐标 */ drawLine:function(x, y, sx, sy){//目标x y 开始sx sy this.context.beginPath(); if(sx !== undefined && sy !== undefined ){ this.context.moveTo(sx,sy); } //this.context.beginPath(); this.context.lineTo(x, y); this.context.stroke(); }, fillText:function(text, x, y){ this.context.fillText(text, this.getx(x), this.gety(y)); }, build:function(){//构建坐标系 this.drawLine(this.jx, this.height, this.jx, 0);// y this.drawLine(0, this.jy, this.width, this.jy);// x this.setFillColor('#d8d8d8'); this.fillText("O", this.jx+5 , this.jy+10);//原点坐标 0 this.buildCoordinate();// +x height/2 }, buildCoordinate:function(){//构建坐标系中的刻度和数字 var calibration = this.calibration * this.proportion;//calibration 最小刻度 var width = this.width; var height = this.height; // len = 中心点到4个最远点的最大绝对值 / 最小间隔单位 var len = Math.max( Math.max( Math.abs(this.getx(0) - width), Math.abs(this.getx(0) - 0) ), //x轴绝对最大值 Math.max( Math.abs(this.gety(0) - height ), Math.abs(this.gety(0) - 0) ) //y轴绝对最大值 )*this.proportion / calibration; //this.setFillColor('#d8d8d8'); var fixed = this.proportion >= 1 ? function(x){//对于绘制比例小于1 处理小位数 return x; } : function(x){ return (x).toFixed(1);}; var j=0;//中间变量 var d = 0; var sx=0; var sy=0; this.context.textBaseline = "middle"; this.setFillColor('#d8d8d8'); for(var i=1; i<=len;i++){//注释过的代码都是适当优化过的 其实等于没优化 j = String(fixed(calibration*i)); //console.log(typeof j); sx = this.getx(calibration*i);//第一象限 sy = this.gety(0); this.drawLine(sx, sy, sx, sy-5); this.context.textAlign = "center"; this.context.fillText(j, sx, sy+10); /***/ sx = this.getx(-calibration*i);//第3象限 //sy = this.gety(0); this.drawLine(sx, sy, sx, sy-5); this.context.fillText(j, sx, sy+10); /***/ sx = this.getx(0);//第4象限 sy = this.gety(-calibration*i); this.drawLine(sx, sy, sx-5, sy); this.context.textAlign = "left"; this.context.fillText(j, sx+5, sy); /***/ //sx = this.getx(0);//第2象限 sy = this.gety(calibration*i); this.drawLine(sx, sy, sx-5, sy); this.context.fillText(j, sx+5, sy); /***/ } }, isIn:function(x, y){ var x = this.getx(x); var y = this.gety(y); return x>=0 && x <= this.width && y>=0 && y<= this.height; }, /** 获取真实x坐标 */ getx:function(x){ return parseInt(this.jx+(x/this.proportion)); }, /** 获取真实x坐标 */ gety:function(y){ return parseInt(this.jy-(y/this.proportion)); } };
