[从头学数学] 第144节 一次函数

剧情提要：
[机器小伟]在[工程师阿伟]的陪同下进入了筑基中期的修炼，
这次要修炼的目标是[一次函数]。

正剧开始：

星历2016年03月21日 10:36:24, 银河系厄尔斯星球中华帝国江南行省。
[工程师阿伟]正在和[机器小伟]一起研究[一次函数]。

为了研究函数，阿伟特意进化了一下坐标轴工具，从此，坐标轴可以带上刻度了：

<span style="font-size:18px;">	/**
	* @usage   绘制直角坐标系
	* @author  mw
	* @date    2015年11月28日  星期六  14:17:34 
	* @param
	* @return
	*
	*/

	this.axis2D = function(x, y, r, xScale) {
		plot.save();	
		
		y = -y;
		
		xScale = xScale ? xScale : 1.5;
		
		plot.setFillStyle('black')
			.setStrokeStyle('black');
			
		plot.beginPath()
			.moveTo(x-xScale*r,y)
			.lineTo(x+xScale*r,y)
			.closePath()
			.stroke();
			
		plot.beginPath()
			.moveTo(x,y-r)
			.lineTo(x,y+r)
			.closePath()
			.stroke();		

		
		var r0 = 10;
		
		//x轴箭头
		plot.beginPath()
			.moveTo(x+xScale*r- r0*Math.cos(Math.PI/3), y-r0*Math.sin(Math.PI/3))
			.lineTo(x+xScale*r+r0*Math.sin(Math.PI/3), y)
			.lineTo(x+xScale*r -r0*Math.cos(Math.PI/3), y+r0*Math.sin(Math.PI/3))
			.closePath()
			.fill()
		
		plot.fillText("X", x+xScale*r, y-10, 20);
		plot.fillText("Y", x+10, y-r+10, 20);
		
		//y轴箭头
		plot.beginPath()
			.moveTo(x+ r0*Math.sin(Math.PI/3), y-r+r0*Math.cos(Math.PI/3))
			.lineTo(x, y-r-r0*Math.sin(Math.PI/3))
			.lineTo(x-r0*Math.sin(Math.PI/3), y-r+r0*Math.cos(Math.PI/3))
			.closePath()
			.fill()
		
		plot.restore();
	}	
	
/**
* @usage   坐标轴的标尺
* @author  mw
* @date    2016年03月21日  星期一  09:10:42 
* @param
* @return
*
*/
this.axisSpacing = function(start, end, spacing, scale, mode) {
	//如果start和end同号，默认坐标原点为start，坐标轴正向标注到end处
	//spacing为从start到end之间的每个刻度的间隔
	//scale为坐标轴方格单位的大小，影响图形的视觉大小
	//scale越大，1个单位在图像上的长度就越大
	//mode确定坐标刻度是标注给'X', 'Y', 或'Z'轴等

	plot.save()
		.setStrokeStyle('#FF0044')
		.setFillStyle('#CC0022');
		
	mode = mode ? mode : 'X';
	
	var lineSpace = [];
	var maxStop = 0, minStop = 0;
	
	if (start > end) {
		var swap = start;
		start = end;
		end = swap;
	}
	
	//判断start和end是否同号
	var same = start * end < 0 ? false : true;
		
	if (mode.toUpperCase() == 'X') {
		if (same == false) {
			//start和end异号，坐标原点为0
			minStop = Math.floor(start/spacing);
			maxStop = Math.ceil(end/spacing);
		}
		else {
			if (start >= 0) {
				minStop = 0;
				maxStop = Math.ceil((end-start)/spacing);
			} 
			else if (end <= 0) {
				maxStop = 0;
				minStop = Math.floor((start-end)/spacing);
			}
		}
		
		
		for (var i = minStop; i <= maxStop; i++) {
			lineSpace.push(i);
		}
		
		var len = lineSpace.length;
		var x , y;
		var s, measure;
		
		//刻度线
		plot.beginPath();
		for (var i = 0; i < len; i++) {
			x = lineSpace[i]*scale;
			
			plot.moveTo(x, 0)
				.lineTo(x, -5);
		}
				
		plot.closePath()
			.stroke();
		
		//标注值文本
		for (var i = 0; i < len; i++) {
			if (same == false) {
				x = lineSpace[i]*spacing;
			}
			else {
				if (start >= 0) {
					x = start + lineSpace[i]*spacing;
				}
				else if (end <= 0) {
					x = end+lineSpace[i]*spacing;
				}
			}
			
			if (Math.abs(x-Math.round(x)) < 0.0001) {
				s = x.toFixed(0);
			}
			else {
				s = x.toFixed(2);
			}
			measure = plot.measureText(s);
			
			plot.fillText(s, lineSpace[i]*scale-measure/2, 20, measure);
		}
	
	}
	else if (mode.toUpperCase() == 'Y') {
		if (same == false) {
			//start和end异号，坐标原点为0
			minStop = Math.floor(start/spacing);
			maxStop = Math.ceil(end/spacing);
		}
		else {
			if (start >= 0) {
				minStop = 0;
				maxStop = Math.ceil((end-start)/spacing);
			}
			else if (end <= 0) {
				maxStop = 0;
				minStop = Math.floor((start-end)/spacing);
			}
		}
		
		for (var i = minStop; i <= maxStop; i++) {
			lineSpace.push(i);
		}
		
		var len = lineSpace.length;
		var x , y;
		var s, measure;
		
		//刻度线
		plot.beginPath();
		for (var i = 0; i < len; i++) {
			y = -lineSpace[i]*scale;
			
			plot.moveTo(0, y)
				.lineTo(-10, y);
		}
				
		plot.closePath()
			.stroke();
		
		//标注值文本
		for (var i = 0; i < len; i++) {
			if (same == false) {
				y = lineSpace[i]*spacing;
			}
			else {
				if (start >= 0) {
					y = start + lineSpace[i]*spacing;
				}
				else if (end <= 0) {
					y = end+lineSpace[i]*spacing;
				}
			}
			
			if (Math.abs(y-Math.round(y)) < 0.0001) {
				s = y.toFixed(0);
			}
			else {
				s = y.toFixed(2);
			}
			measure = plot.measureText(s);
			plot.fillText(s, -15-measure, -(lineSpace[i]*scale-5), measure);
		}
	
	}
	else {
		//'Z'轴标注待扩展
	}
	
	plot.restore();


}</span>

<span style="font-size:18px;">		var r = 20;
		config.setSector(1,1,1,1);  
		config.graphPaper2D(0, 0, r);
		config.axis2D(0, 0,180);  
	
		var scale = 2 * r;
		config.axisSpacing(1984, 2010, 5, scale, 'X');
		config.axisSpacing(10, 14, 1, scale, 'Y');
		
		var transform = new Transform();
		var a = [[1984,10.34],[1989,11.06],[1994,11.76],[1999,12.52],[2010,13.71]];
		
		a = transform.scale(transform.translate(a, -1984, -10), scale/5, scale);
		
		var tmp = [].concat(a);
		shape.pointDraw(tmp, 'red');
		tmp = [].concat(a);
		shape.multiLineDraw(tmp, 'blue');</span>

好像人口增长速度放缓了呀。

<span style="font-size:18px;">		var r = 20;
		config.setSector(5,1,4,1);  
		config.graphPaper2D(0, 0, r);
		config.axis2D(0, 0,260, 1);  
	
		var scale = 2 * r;
		config.axisSpacing(0, 12, 2, scale, 'Y');
		config.axisSpacing(0, 4, 2, scale, 'X');
		
		var transform = new Transform();
		
		var a = [];
		for (var i = 0; i < 4; i++) {
			a.push([i, i*i]);
		}
		
		var tmp = [].concat(a);
		shape.pointDraw(tmp, 'red', r);
		tmp = [].concat(a);
		shape.multiLineDraw(tmp, 'pink', r);</span>

<span style="font-size:18px;">		var r = 20;
		config.setSector(5,1,4,1);  
		config.graphPaper2D(0, 0, r);
		config.axis2D(0, 0,260, 1);  
	
		var scale = 2 * r;
		config.axisSpacing(0, 12, 2, scale, 'Y');
		config.axisSpacing(-5, 5, 2, scale, 'X');
		
		var transform = new Transform();
		
		var a = [];
		for (var i = -5; i <= 5; i++) {
			a.push([i, i+0.5]);
		}
		
		var tmp = [].concat(a);
		shape.pointDraw(tmp, 'red', r);
		tmp = [].concat(a);
		shape.multiLineDraw(tmp, 'pink', r);
		
		var b = [];
		for (var i = 1; i <= 5; i++) {
			b.push([i, 6/i]);
		}
		
		tmp = [].concat(b);
		shape.pointDraw(tmp, 'blue', r);
		tmp = [].concat(b);
		shape.multiLineDraw(tmp, '#22CCFF', r);</span>

<span style="font-size:18px;">		var r = 20;
		config.setSector(5,1,4,1);  
		config.graphPaper2D(0, 0, r);
		config.axis2D(0, 0,260, 1);  
	
		var scale = 2 * r;
		config.axisSpacing(0, 1, 0.2, scale, 'Y');
		config.axisSpacing(0, 1620*5, 1620, scale, 'X');
		
		var transform = new Transform();
		
		var a = [];
		for (var i = 0; i <= 5; i++) {
			a.push([i, Math.pow(0.5, i)]);
		}
		a = transform.scale(a, 2, 10);
		var tmp = [].concat(a);
		shape.pointDraw(tmp, 'red', r);
		tmp = [].concat(a);
		shape.multiLineDraw(tmp, 'pink', r);</span>

<span style="font-size:18px;">		var r = 20;
		config.setSector(5,1,4,1);  
		config.graphPaper2D(0, 0, r);
		config.axis2D(0, 0,260, 1);  
	
		var scale = 2 * r;
		config.axisSpacing(-5, 5, 1, scale, 'X');
		config.axisSpacing(-5, 5, 1, scale, 'Y');
		
		
		var transform = new Transform();
		
		var a = [];
		var b = [];
		for (var i = -10; i <= 10; i++) {
			a.push([i, -1.5*i]);
			b.push([i, -4*i]);
		}

		var tmp = [].concat(a);
		shape.pointDraw(tmp, 'red', r);
		tmp = [].concat(a);
		shape.multiLineDraw(tmp, 'pink', r);
		
		
		tmp = [].concat(b);
		shape.pointDraw(tmp, 'blue', r);
		tmp = [].concat(b);
		shape.multiLineDraw(tmp, '#22CCFF', r);</span>

<span style="font-size:18px;">		var r = 20;
		config.setSector(5,1,4,1);  
		config.graphPaper2D(0, 0, r);
		config.axis2D(0, 0,260, 1);  
	
		var scale = 2 * r;
		config.axisSpacing(-5, 5, 1, scale, 'X');
		config.axisSpacing(-5, 5, 1, scale, 'Y');
		
		
		var transform = new Transform();
		
		var a = [];
		var b = [];
		for (var i = -10; i <= 10; i++) {
			a.push([i, -6*i]);
			b.push([i, -6*i+5]);
		}

		var tmp = [].concat(a);
		shape.pointDraw(tmp, 'red', r);
		tmp = [].concat(a);
		shape.multiLineDraw(tmp, 'pink', r);
		
		
		tmp = [].concat(b);
		shape.pointDraw(tmp, 'blue', r);
		tmp = [].concat(b);
		shape.multiLineDraw(tmp, '#22CCFF', r);</span>

<span style="font-size:18px;">		var r = 20;
		config.setSector(5,1,4,1);  
		config.graphPaper2D(0, 0, r);
		config.axis2D(0, 0,260, 1);  
	
		var scale = 2 * r;
		config.axisSpacing(-5, 5, 1, scale, 'X');
		config.axisSpacing(-5, 5, 1, scale, 'Y');
		
		
		var transform = new Transform();
		
		var a = [];
		var b = [];
		for (var i = -10; i <= 10; i++) {
			a.push([i, 2*i-1]);
			b.push([i, -0.5*i+1]);
		}

		var tmp = [].concat(a);
		shape.pointDraw(tmp, 'red', r);
		tmp = [].concat(a);
		shape.multiLineDraw(tmp, 'pink', r);
		
		
		tmp = [].concat(b);
		shape.pointDraw(tmp, 'blue', r);
		tmp = [].concat(b);
		shape.multiLineDraw(tmp, '#22CCFF', r);</span>

<span style="font-size:18px;">		var r = 20;
		config.setSector(5,1,4,1);  
		config.graphPaper2D(0, 0, r);
		config.axis2D(0, 0,260, 1);  
	
		var scale = 2 * r;
		config.axisSpacing(-5, 5, 1, scale, 'X');
		config.axisSpacing(-5, 5, 1, scale, 'Y');
		
		
		var transform = new Transform();
		
		var a = [];
		var b = [];
		var c = [];
		for (var i = -10; i <= 10; i++) {
			a.push([i, 3*i-2]);
			b.push([i, i*i]);
			c.push([i, i*i*(i-3)]);
		}

		var tmp = [].concat(a);
		shape.pointDraw(tmp, 'red', r);
		tmp = [].concat(a);
		shape.multiLineDraw(tmp, 'pink', r);
		
		
		tmp = [].concat(b);
		shape.pointDraw(tmp, 'blue', r);
		tmp = [].concat(b);
		shape.multiLineDraw(tmp, '#22CCFF', r);
		
		tmp = [].concat(c);
		shape.pointDraw(tmp, 'green', r);
		tmp = [].concat(c);
		shape.multiLineDraw(tmp, '#CCFF22', r);</span>

可见如果超过75小时，肯定就是包月120元的划算了。

<span style="font-size:18px;">		var r = 20;
		config.setSector(5,1,4,1);  
		config.graphPaper2D(0, 0, r);
		config.axis2D(0, 0,260, 1);  
	
		var scale = 2 * r;
		config.axisSpacing(0, 150, 20, scale, 'X');
		config.axisSpacing(0, 150, 20, scale, 'Y');
		
		
		var transform = new Transform();
		
		var a = [];
		var b = [];
		var c = [];
		for (var i = 0; i <= 300; i+=5) {
			if (i <= 25) {
				a.push([i, 30]);
			}
			else {
				a.push([i, 30+(i-25)*0.05*60]);
			}
			
			if (i <= 50) {
				b.push([i, 50]);
			}
			else {
				b.push([i, 50+(i-50)*0.05*60]);
			}
			
			c.push([i, 120]);
		}

		
		var tmp = [].concat(a);
		//shape.pointDraw(tmp, 'red', 1);
		//tmp = [].concat(a);
		shape.multiLineDraw(tmp, 'pink', 2);
		
		
		tmp = [].concat(b);
		//shape.pointDraw(tmp, 'blue', r);
		//tmp = [].concat(b);
		shape.multiLineDraw(tmp, '#22CCFF',2);
		
		tmp = [].concat(c);
		//shape.pointDraw(tmp, 'green', r);
		//tmp = [].concat(c);
		shape.multiLineDraw(tmp, '#CCFF22', 2);</span>

可选区域为黄线往下，蓝线往下，红线往上，x轴往上的区域，而且黄线的值越大说明花钱越少。

这样的话可以选择4辆甲车和2辆乙车。

但这个区域实在不是那么直观。

<span style="font-size:18px;">		var r = 20;
		config.setSector(5,1,4,1);  
		config.graphPaper2D(0, 0, r);
		config.axis2D(0, 0,260, 1);  
	
		var scale = 2 * r;
		config.axisSpacing(0, 10, 2, scale, 'X');
		config.axisSpacing(0, 10, 2, scale, 'Y');
		
		
		var transform = new Transform();
		
		var a = [];
		var b = [];
		var c = [];
		for (var i = 0; i <= 6; i++) {
			//甲车x辆，乙车y辆
			a.push([i, (234-45*i)/30]);
			b.push([i, 6-i]);
			c.push([i, (2300-400*i)/280]);
		}

		
		var tmp = [].concat(a);
		shape.pointDraw(tmp, 'red', r);
		tmp = [].concat(a);
		shape.multiLineDraw(tmp, 'pink', r);
		
		
		tmp = [].concat(b);
		shape.pointDraw(tmp, 'blue', r);
		tmp = [].concat(b);
		shape.multiLineDraw(tmp, '#22CCFF',r);
		
		tmp = [].concat(c);
		shape.pointDraw(tmp, 'green', r);
		tmp = [].concat(c);
		shape.multiLineDraw(tmp, '#CCFF22', r);</span>

<span style="font-size:18px;">		var r = 20;
		config.setSector(5,1,4,1);  
		config.graphPaper2D(0, 0, r);
		config.axis2D(0, 0,260, 1);  
	
		var scale = 2 * r;
		var spaceX = 10, spaceY = 10;
		config.axisSpacing(1960, 2010, spaceX, scale, 'X');
		config.axisSpacing(20,80, spaceY, scale, 'Y');
		
		var transform = new Transform();
		var a = [[1960,30],[1974,40],[1987,50],[1999,60],[2010,69]];
		
		a = transform.scale(transform.translate(a, -1960, -20), scale/spaceX, scale/spaceY);
		
		var tmp = [].concat(a);
		shape.pointDraw(tmp, 'red');
		tmp = [].concat(a);
		shape.multiLineDraw(tmp, 'blue');</span>

本节到此结束，欲知后事如何，请看下回分解。