[从头学数学] 第120节 平面直角坐标系

剧情提要：
[机器小伟]在[工程师阿伟]的陪同下进入了筑基初期的修炼，
这次要修炼的目标是[平面直角坐标系]。

正剧开始：

星历2016年03月04日 11:01:10, 银河系厄尔斯星球中华帝国江南行省。
[工程师阿伟]正在和[机器小伟]一起研究[平面直角坐标系]。

在开始这次的修炼之前，[工程师阿伟]给[机器小伟]制作了一些方格纸，有了这些格子，读取坐标会变得很轻松。

首先登场的是三维的格子：

<span style="font-size:18px;">function myDraw() {   
      
    var config = new PlotConfiguration();      
    config.init();      
    config.setPreference();     
    config.setSector(1,1,1,1);  
	config.graphPaper3D(0,-1, 0, 50);
    config.axis3D(0, 0, 0, 180);  
	
	
}

	//绘制三维方格纸
	this.graphPaper3D = function(x, y, z, r) {
		plot.save()
			.setLineWidth(1);
			
		var style = '#888888';
			
		//偏移半个立方块
		var offset = 0.5;
		
		if (x > 10 || y > 10 || z > 10) {
			x/=r;
			y/=r;
			z/=r;
		}
		
		for (var i = -30; i < 30; i++) {
			for (var j = 0; j < 1; j++) {
				for (var k = -30; k < 30; k++) {
					if (Math.abs(i * r > 300) || Math.abs(k *r) > 300) continue;
					shape.strokeCubic(offset+x+k, offset+y+j, offset+z+i, r, style);
				}
			}
		}
		
		plot.restore();
	}

}

this.point3D = function(x0, y0, z0) {
	//canvas中y轴坐标向下为正，与笛卡尔坐标系相反
	//所以此处先取反
	//
	z0 = z0 /2;
	x0 = x0 - z0*0.707;
	y0 = y0 + z0*0.707;
	
	
	return [x0, y0];	
}

this.strokeCubic = function(x0, y0, z0, r, style) {
	plot.save();
	
	x0 *= r;
	y0 *= r;
	z0 *= r;
	
	r *= 0.5;
	var array = [[-r, -r], [-r, r], [r, r], [r, -r]];
	
	var top = [];
	var left = [];
	var front = [];
	var x, y, z;
	
	for (var i = 0; i < 4; i++) {
		x = x0+array[i][0];
		y = -(y0+r);
		z = z0+array[i][1];
		top.push(this.point3D(x, y, z));
	}
	
	for (var i = 0; i < 4; i++) {
		x = x0+r;
		y = -(y0+array[i][0]);
		z = z0+array[i][1];
		left.push(this.point3D(x, y, z));
	}
	
	for (var i = 0; i < 4; i++) {
		x = x0+array[i][0];
		y = -(y0+array[i][1]);
		z = z0+r;
		front.push(this.point3D(x, y, z));
	}
	
	var tmp = [].concat(top);
	shape.fillDraw(tmp, style);
	tmp=[].concat(top);
	shape.strokeDraw(tmp, 'white');
	tmp = [].concat(left);
	shape.strokeDraw(left, 'black');
	tmp = [].concat(front);
	shape.strokeDraw(front, style);
	plot.restore();

}</span>

它们有什么样的效果呢？

放大一点看看：

这个以后可能有用，但这次修炼用不上，所以阿伟又设计了二维方格纸：

<span style="font-size:18px;">function myDraw() {   
      
    var config = new PlotConfiguration();      
    config.init();      
    config.setPreference();     
    config.setSector(1,1,1,1);  
	config.graphPaper2D(0, 0, 10);
    config.axis2D(0, 0,  180);  
	
	
}

//绘制二维方格纸
this.graphPaper2D = function(x, y, r) {
	plot.save()
		.translate(x, -y)
		.setLineWidth(1)
		.setStrokeStyle('#888888');
		
	for (var i = 0; i < 20; i++) {
		for (var j = 0; j < 30; j++) {
			if (Math.abs(i * r > 300) || Math.abs(j *r) > 300) continue;
			plot.strokeRect(j*r, i*r, r, r);			
			plot.strokeRect(-j*r, -i*r, r, r);
			plot.strokeRect(j*r, -i*r, r, r);
			plot.strokeRect(-j*r, i*r, r, r);
		}
	}
	
	plot.restore();
}</span>

放大点看看：

这个应该能用上，好，下面就该看[人叫板老师]的功法了。

[人叫板老师]现在画的图也太偷工减料了，影剧院的电影要是那样的画面，谁还愿意去看呢！

<span style="font-size:18px;">//有序数对
function myDraw() {   
      
    var config = new PlotConfiguration();      
    config.init();      
    config.setPreference();     
    config.setSector(1,1,1,1);  
	
	var r = 20;
	config.graphPaper2D(0, 0, r);
    config.axis2D(0, 0, 180);  
	
	var array = [[1,5], [2,4], [4,2], [3,3], [5,6]];
	var tmp = [].concat(array);
	
	shape.pointDraw(tmp, 'red', r);
	var s = '['+array.join('], [')+']';
	plot.fillText(s, 20, 50, plot.measureText(s));
	
	
}</span>

<span style="font-size:18px;">//绘出各点
function myDraw() {   
      
    var config = new PlotConfiguration();      
    config.init();      
    config.setPreference();     
    config.setSector(1,1,1,1);  
	
	var r = 20;
	config.graphPaper2D(0, 0, r);
    config.axis2D(0, 0, 180);  
	
	var array = [[4, 5], [-2,3],[-4,-1],[2.5,-2],[0,-4]];
	var tmp = [].concat(array);
	
	shape.pointDraw(tmp, 'red', r);
	var s = '['+array.join('], [')+']';
	plot.fillText(s, 20, 100, plot.measureText(s));
	
	
}</span>

<span style="font-size:18px;">//题3
function myDraw() {   
      
    var config = new PlotConfiguration();      
    config.init();      
    config.setPreference();     
    config.setSector(1,1,1,1);  
	
	var r = 20;
	config.graphPaper2D(0, 0, r);
    config.axis2D(0, 0, 180);  
	
	var array = [[-5,4], [-2,2],[3,4],[2,1],[5,-3],[-1,-2],[-5,-3],[-4,-1]];	
	
	var tmp = [].concat(array);
	
	shape.pointDraw(tmp, 'red', r);
	tmp = [].concat(array);
	//shape.fillDraw(tmp, 'pink', r);
	shape.strokeDraw(tmp, 'blue', r);
	var s = '['+array.join('], [')+']';
	var measure = plot.measureText(s);
	plot.fillText(s, -measure/2, 100, measure);
	
	
}</span>

<span style="font-size:18px;">//题5
function myDraw() {   
      
    var config = new PlotConfiguration();      
    config.init();      
    config.setPreference();     
    config.setSector(1,1,1,1);  
	
	var r = 20;
	config.graphPaper2D(0, 0, r);
    config.axis2D(0, 0, 180);  
	
	var array = [[-4,-4],[-2,-2],[3,3],[5,5],[-3,-3],[0,0]];	
	
	var tmp = [].concat(array);
	
	shape.pointDraw(tmp, 'red', r);
	tmp = [].concat(array);
	//shape.fillDraw(tmp, 'pink', r);
	shape.multiLineDraw(tmp, 'blue', r);
	var s = '['+array.join('], [')+']';
	var measure = plot.measureText(s);
	plot.fillText(s, -measure/2, 100, measure);
	
	
}
</span>

<span style="font-size:18px;">//题6
function myDraw() {   
      
    var config = new PlotConfiguration();      
    config.init();      
    config.setPreference();     
    
	

	
	/*
	var array = [[-4,-4],[-2,-2],[3,3],[5,5],[-3,-3],[0,0]];	
	
	var tmp = [].concat(array);
	
	shape.pointDraw(tmp, 'red', r);
	tmp = [].concat(array);
	//shape.fillDraw(tmp, 'pink', r);
	shape.multiLineDraw(tmp, 'blue', r);
	var s = '['+array.join('], [')+']';
	var measure = plot.measureText(s);
	plot.fillText(s, -measure/2, 100, measure);*/
	
	var r = 24;
	var image = new Image();
	image.src = './1.jpg';
	
	image.onload = function() {
		plot.translate(300-3*r, 1.9*r);
		plot.drawImage(image);

		
	plot.setGlobalAlpha(0.5);
	
	
	config.setSector(1,1,1,1);  
	config.graphPaper2D(0, 0, r);
    config.axis2D(0, 0, 180);  
	}
	
	
}
</span>

<span style="font-size:18px;">//题6
function myDraw() {   
      
    var config = new PlotConfiguration();      
    config.init();      
    config.setPreference();  		
    
	var r = 30;
	config.setSector(1,1,1,1);  
	config.graphPaper2D(0, 0, r);
    config.axis2D(0, 0, 180);  

	
	//三角形
	var array = [[0,0],[4,0],[3,2]];	
	//左正方形
	var array2 = [[0,0],[3,2],[1,5],[-2,3]];
	//右正方形
	var array3 = [[4,0],[6,1],[5,3],[3,2]];
	
	//
	var tmp2 = [].concat(array2);	
	shape.pointDraw(tmp2, 'red', r);
	tmp2 = [].concat(array2);
	shape.strokeDraw(tmp2, 'blue', r);
	
	var s2 = '['+array2.join('], [')+']';
	var measure2 = plot.measureText(s2);
	plot.fillText(s2, -measure2/2, 125, measure2);
	
	
	//
	var tmp3 = [].concat(array3);	
	shape.pointDraw(tmp3, 'red', r);
	tmp3 = [].concat(array3);
	shape.strokeDraw(tmp3, 'blue', r);
	
	var s3 = '['+array3.join('], [')+']';
	var measure3 = plot.measureText(s3);
	plot.fillText(s3, -measure3/2, 150, measure3);
	
		//
	var tmp = [].concat(array);	
	shape.pointDraw(tmp, 'red', r);
	tmp = [].concat(array);
	shape.strokeDraw(tmp, 'blue', r);
	
	var s = '['+array.join('], [')+']';
	var measure = plot.measureText(s);
	plot.fillText(s, -measure/2, 100, measure);
	

}</span>

<span style="font-size:18px;">//题11
function myDraw() {   
      
    var config = new PlotConfiguration();      
    config.init();      
    config.setPreference();  
		
    
	var r = 24;
	
	var image = new Image();
	image.src = './1.jpg';
	
	image.onload = function() {
		plot.translate(300-4.6*r, 2.9*r);
		plot.drawImage(image);
		
		config.setSector(1,1,1,1);  
		config.graphPaper2D(0, 0, r);
		config.axis2D(0, 0, 180);  

	}
	
}</span>

<span style="font-size:18px;">//题13
function myDraw() {   
      
    var config = new PlotConfiguration();      
    config.init();      
    config.setPreference();  
		
    
	var r = 21;
	
	var image = new Image();
	image.src = './1.jpg';
	
	image.onload = function() {
		plot.translate(300-8.7*r, 0.9*r);
		plot.drawImage(image);
		
		config.setSector(1,1,1,1);  
		config.graphPaper2D(0, 0, r);
		config.axis2D(0, 0, 180);  

	}
	
}</span>

<span style="font-size:18px;">//题16
function myDraw() {   
      
    var config = new PlotConfiguration();      
    config.init();      
    config.setPreference();  
		
    
	var r = 31;
	
	var image = new Image();
	image.src = './1.jpg';
	
	image.onload = function() {
		plot.translate(300-5.6*r, 1.4*r);
		plot.drawImage(image);
		
		config.setSector(1,1,1,1);  
		config.graphPaper2D(0, 0, r);
		config.axis2D(0, 0, 180);  

	}
	
}</span>

<span style="font-size:18px;">//题16
function myDraw() {   
      
    var config = new PlotConfiguration();      
    config.init();      
    config.setPreference();  
		
    
	var r = 31;
	
	var image = new Image();
	image.src = './1.jpg';
	
	image.onload = function() {
		plot.translate(300-5.6*r, 1.4*r);
		plot.drawImage(image);
		
		config.setSector(1,1,1,1);  
		config.graphPaper2D(0, 0, r);
		config.axis2D(0, 0, 180);  
		
		var array = [[0,0],[400,0],[300,300],[0,400],[-300,200],[-500,0],
					[-200,-100],[100,-300],[200,-200]];	
		
		var tmp = [].concat(array);
		r/=100;
		shape.pointDraw(tmp, 'red', r);
		tmp = [].concat(array);
		//shape.fillDraw(tmp, 'pink', r);
		shape.multiLineDraw(tmp, 'blue', r);
		var s = '['+array.join('], [')+']';
		var measure = plot.measureText(s);
		plot.fillText(s, -300, 150, 600);

	}
	
}</span>

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