[从头学数学] 第94节 圆

剧情提要：
[机器小伟]在[工程师阿伟]的陪同下进入练气期第十一层功法的修炼，
这次要修炼的目标是[圆]。

正剧开始：

星历2016年02月18日 16:27:34, 银河系厄尔斯星球中华帝国江南行省。
[工程师阿伟]正在和[机器小伟]一起研究圆。

在开始今天的修炼之前，小伟突然想起了风车，于是就拿出来玩了一会：

<span style="font-size:18px;">//大风车 转呀转
function myDraw() {   
    var config = new PlotConfiguration();    
    config.init();    
    config.setPreference();   
    
	var image = new Image();
	
	image.src = './1.jpg';
	
	image.onload = function() {
		var angle = 0;
		var interval = setInterval(function() {
			
			
			windMill(angle);
			
			angle += Math.PI/6;
			if (angle > Math.PI*2)
				angle = Math.PI/6;
		
		}, 50);

	}	
	
}


function windMill(rot) {
	var config = new PlotConfiguration();      
    config.init();      
    config.setPreference();     
      
    config.setSector(1,1,1,1);   
    config.axis2D(0, 0, 180);    
      
    plot.save()
		.rotate(rot);
		
    shape.strokeDraw(shape.nEdge(0, 0, 80, 4, Math.PI/4), 'black');  
      
    var tri = new Triangle();  
      
    plot.save()  
        .translate(-100, 0);  
    tri.know3edges([100, 100, 141]);      
    tri.fill('green', 1);  
    plot.restore();  
  
      
    plot.save()   
        .translate(0, -100)  
        .rotate(Math.PI/2);       
          
    tri.know3edges([100, 100, 141]);  
    tri.fill('yellow', 1);  
    plot.restore();  
      
    plot.save()   
        .translate(100, 0)  
        .rotate(Math.PI);         
          
    tri.know3edges([100, 100, 141]);  
    tri.fill('red', 1);  
    plot.restore();  
      
      
    plot.save()   
        .translate(0, 100)  
        .rotate(Math.PI*1.5);         
          
    tri.know3edges([100, 100, 141]);  
    tri.fill('blue', 1);  
    plot.restore();  
	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.axis2D(0, 0, 180);
    
	var r = 100;
	var x0 = 0, y0 = 0;
	var x1 = r, y1 = r;
	
	plot.setFillStyle('red');
	
	plot.save()
		
	plot.beginPath()
		.moveTo(0, -r)
		.arcTo(0, 0, r, 0, r)
		.moveTo(0, -r)
		.arcTo(0, 0, -r, 0, r)
		.moveTo(0, r)
		.arcTo(0, 0, -r, 0, r)
		.moveTo(0, r)
		.arcTo(0, 0, r, 0, r)
		
				.moveTo(0, -r)
		.arcTo(r, -r, r, 0, r)
		.moveTo(0, -r)
		.arcTo(-r, -r, -r, 0, r)
				.moveTo(0, r)
		.arcTo(r, r, r, 0, r)
		.moveTo(0, r)
		.arcTo(-r, r, -r, 0, r)		

		.closePath();		
	
	plot.fill();
	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.axis2D(0, 0, 180);
    
	var r = 100;
	var x0 = 0, y0 = 0;
	var x1 = r, y1 = r;
	
	plot.setFillStyle('blue');
	shape.fillCircle(0, 0, r);
	
	
	r *= 0.707;
		
	plot.setFillStyle('cyan');
	
	plot.save()
		.rotate(Math.PI/4);
	
	plot.beginPath()
		.moveTo(0, 0)
		.arcTo(0, -r, -r, -r, r)
		.moveTo(0, 0)
		.arcTo(-r, 0, -r, -r, r)
		.moveTo(0, 0)
		.arcTo(0, r, -r, r, r)
		.moveTo(0, 0)
		.arcTo(-r, 0, -r, r, r)
				.moveTo(0, 0)
		.arcTo(0, -r, r, -r, r)
		.moveTo(0, 0)
		.arcTo(r, 0, r, -r, r)
				.moveTo(0, 0)
		.arcTo(0, r, r, r, r)
		.moveTo(0, 0)
		.arcTo(r, 0, r, r, r)
		.closePath();		
	
	plot.fill();
	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.axis2D(0, 0, 180);
    
	var r = 100;
	var x0 = 0, y0 = 0;

	plot.setFillStyle('#FF0066');
	shape.fillCircle(0, 0, r);
	
	var sAngle = 0, eAngle = Math.PI;
	
	
	plot.save()
		.setFillStyle('#0066FF');
		
	plot.beginPath()
		.arc(r/2, 0, r/2, sAngle, eAngle, 1)
		.closePath()
		.fill();
		
	sAngle-=Math.PI/2, eAngle -= Math.PI/2;
	plot.beginPath()
		.arc(0, -r/2, r/2, sAngle, eAngle, 1)
		.closePath()
		.fill();
		
	sAngle-=Math.PI/2, eAngle -= Math.PI/2;
	plot.beginPath()
		.arc(-r/2, 0, r/2, sAngle, eAngle, 1)
		.closePath()
		.fill();
	
	sAngle-=Math.PI/2, eAngle -= Math.PI/2;
	plot.beginPath()
		.arc(0, r/2, r/2, sAngle, eAngle, 1)
		.closePath()
		.fill();
		
	plot.restore();

	r *= 0.5;
	
	plot.save()
		.setFillStyle('#FF0066');
		
	plot.beginPath()
		.arc(3*r/2, 0, r/2, sAngle, eAngle, 0)
		.closePath()
		.fill();
		
	sAngle-=Math.PI/2, eAngle -= Math.PI/2;
	plot.beginPath()
		.arc(0, -3*r/2, r/2, sAngle, eAngle, 0)
		.closePath()
		.fill();
		
	sAngle-=Math.PI/2, eAngle -= Math.PI/2;
	plot.beginPath()
		.arc(-3*r/2, 0, r/2, sAngle, eAngle, 0)
		.closePath()
		.fill();
	
	sAngle-=Math.PI/2, eAngle -= Math.PI/2;
	plot.beginPath()
		.arc(0, 3*r/2, r/2, sAngle, eAngle, 0)
		.closePath()
		.fill();
		
	plot.restore();
	
		plot.save()
		.setFillStyle('#0066FF');
		
	plot.beginPath()
		.arc(r/2, 0, r/2, sAngle, eAngle, 1)
		.closePath()
		.fill();
		
	sAngle-=Math.PI/2, eAngle -= Math.PI/2;
	plot.beginPath()
		.arc(0, -r/2, r/2, sAngle, eAngle, 1)
		.closePath()
		.fill();
		
	sAngle-=Math.PI/2, eAngle -= Math.PI/2;
	plot.beginPath()
		.arc(-r/2, 0, r/2, sAngle, eAngle, 1)
		.closePath()
		.fill();
	
	sAngle-=Math.PI/2, eAngle -= Math.PI/2;
	plot.beginPath()
		.arc(0, r/2, r/2, sAngle, eAngle, 1)
		.closePath()
		.fill();
		
	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.axis2D(0, 0, 180);
    
	var r = 100;
	var x0 = 0, y0 = 0;

	var style1 = '#FF0066', style2 = '#0066FF';
	
	//整圆
	plot.setFillStyle(style1);
	shape.fillCircle(0, 0, r);
	
	var sAngle = 0, eAngle = Math.PI;
	

	//大半圆
	plot.save()
		.setFillStyle(style2);
		
	plot.beginPath()
		.arc(r/2, 0, r/2, sAngle, eAngle, 1)
		.closePath()
		.fill();
		
	sAngle-=Math.PI/2, eAngle -= Math.PI/2;
	plot.beginPath()
		.arc(0, -r/2, r/2, sAngle, eAngle, 1)
		.closePath()
		.fill();
		
	sAngle-=Math.PI/2, eAngle -= Math.PI/2;
	plot.beginPath()
		.arc(-r/2, 0, r/2, sAngle, eAngle, 1)
		.closePath()
		.fill();
	
	sAngle-=Math.PI/2, eAngle -= Math.PI/2;
	plot.beginPath()
		.arc(0, r/2, r/2, sAngle, eAngle, 1)
		.closePath()
		.fill();
		
	plot.restore();

	//小半圆，较远
	r *= 0.5;
	
	sAngle = 0, eAngle = Math.PI;
	
	plot.save()
		.setFillStyle(style2);
		
	plot.beginPath()
		.arc(3*r/2, 0, r/2, sAngle, eAngle, 0)
		.closePath()
		.fill();
		
	sAngle-=Math.PI/2, eAngle -= Math.PI/2;
	plot.beginPath()
		.arc(0, -3*r/2, r/2, sAngle, eAngle, 0)
		.closePath()
		.fill();
		
	sAngle-=Math.PI/2, eAngle -= Math.PI/2;
	plot.beginPath()
		.arc(-3*r/2, 0, r/2, sAngle, eAngle, 0)
		.closePath()
		.fill();
	
	sAngle-=Math.PI/2, eAngle -= Math.PI/2;
	plot.beginPath()
		.arc(0, 3*r/2, r/2, sAngle, eAngle, 0)
		.closePath()
		.fill();
		
	plot.restore();
	
	
	//小半圆，紧挨中心
	sAngle = 0, eAngle = Math.PI;	
	
	plot.save()
		.setFillStyle(style1);
		
	plot.beginPath()
		.arc(r/2, 0, r/2, sAngle, eAngle, 1)
		.closePath()
		.fill();
		
	sAngle-=Math.PI/2, eAngle -= Math.PI/2;
	plot.beginPath()
		.arc(0, -r/2, r/2, sAngle, eAngle, 1)
		.closePath()
		.fill();
		
	sAngle-=Math.PI/2, eAngle -= Math.PI/2;
	plot.beginPath()
		.arc(-r/2, 0, r/2, sAngle, eAngle, 1)
		.closePath()
		.fill();
	
	sAngle-=Math.PI/2, eAngle -= Math.PI/2;
	plot.beginPath()
		.arc(0, r/2, r/2, sAngle, eAngle, 1)
		.closePath()
		.fill();
		
	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.axis2D(0, 0, 180);
    
	var r = 100;
	var x0 = 0, y0 = 0;
	var x1 = r, y1 = r;
	
	
	var style = ['red', 'blue', 'green', 'pink', 'orange', 'cyan', 'purple'];
	
	
	plot.setFillStyle('blue');
	shape.fillCircle(0, 0, r);
	
	plot.setGlobalCompositeOperation('lighter');
	
	for (var i = 0; i < 5; i++) {
		r *= 0.8;
			
		plot.setFillStyle(style[i%6]);
		
		plot.save()
			.rotate(Math.PI/4*i);
		
		plot.beginPath()
			.moveTo(0, 0)
			.arcTo(0, -r, -r, -r, r)
			.moveTo(0, 0)
			.arcTo(-r, 0, -r, -r, r)
			.moveTo(0, 0)
			.arcTo(0, r, -r, r, r)
			.moveTo(0, 0)
			.arcTo(-r, 0, -r, r, r)
					.moveTo(0, 0)
			.arcTo(0, -r, r, -r, r)
			.moveTo(0, 0)
			.arcTo(r, 0, r, -r, r)
					.moveTo(0, 0)
			.arcTo(0, r, r, r, r)
			.moveTo(0, 0)
			.arcTo(r, 0, r, r, r)
			.closePath();		
		
		plot.fill();
		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.axis2D(0, 0, 180);
    
	var r = 100;
	var x0 = 0, y0 = 0;
	var x1 = r, y1 = r;
	
	
	var style = ['red', 'blue', 'green', 'pink', 'orange', 'cyan', 'purple'];
	
	
	plot.setFillStyle('blue');
	shape.fillCircle(0, 0, r);
	
	plot.setGlobalCompositeOperation('source-over');
	
	for (var i = 0; i < 5; i++) {
		r *= 0.8;
			
		plot.setFillStyle(style[i%6]);
		
		plot.save()
			.rotate(Math.PI/4*i);
		
		plot.beginPath()
			.moveTo(0, 0)
			.arcTo(0, -r, -r, -r, r)
			.moveTo(0, 0)
			.arcTo(-r, 0, -r, -r, r)
			.moveTo(0, 0)
			.arcTo(0, r, -r, r, r)
			.moveTo(0, 0)
			.arcTo(-r, 0, -r, r, r)
					.moveTo(0, 0)
			.arcTo(0, -r, r, -r, r)
			.moveTo(0, 0)
			.arcTo(r, 0, r, -r, r)
					.moveTo(0, 0)
			.arcTo(0, r, r, r, r)
			.moveTo(0, 0)
			.arcTo(r, 0, r, r, r)
			.closePath();		
		
		plot.fill();
		plot.restore();
		
	}
	

	
}
</span>

这样的图小伟怎么会错过机会去尝试呢，于是就画出了：

//题10 <1>
function myDraw() {   
    var config = new PlotConfiguration();    
    config.init();    
    config.setPreference();   
	config.setSector(1,1,1,1);
	config.axis2D(0, 0, 180);
    
	var color = ['red', 'green', 'blue', 'orange', 'cyan', 'purple', 'pink'];
	var r = 100;

	var rx, ry;
	var signX = signY = -1;
	
	plot.setFillStyle('blue');
	shape.fillRect(0, 0, 2*r, 2*r);
	
	plot.setFillStyle('pink');
	for (var i = 0; i < 2; i++) {
		for (var j = 0; j < 2; j++) {
			signX = Math.pow(-1, i);
			signY = Math.pow(-1, j);
			
			plot.beginPath()
				.moveTo(0, 0)
				.arcTo(r*signX, 0, r*signX, r*signY, r)
				.moveTo(0, 0)
				.arcTo(0, r*signY, r*signX, r*signY, r)
				.closePath()
				.fill();		
				
		}	
	}
	
}

//题10 <2>
function myDraw() {   
    var config = new PlotConfiguration();    
    config.init();    
    config.setPreference();   
	config.setSector(1,1,1,1);
	config.axis2D(0, 0, 180);
    /*
	var color = ['red', 'green', 'blue', 'orange', 'cyan', 'purple', 'pink'];
	

	var rx, ry;
	var signX = signY = -1;*/
	
	var r = 100;
	var x0 = 0, y0 = 0;  
  
    var style1 = '#FF0066', style2 = '#0066FF';  
      
    //整圆  
    plot.setFillStyle(style1);  
    shape.fillCircle(0, 0, r);  
      
    var sAngle = 0, eAngle = Math.PI;  
      
  
    //大半圆  
    plot.save()  
        .setFillStyle(style2);  
          
    plot.beginPath()  
        .arc(r/2, 0, r/2, sAngle, eAngle, 0)  
        .closePath()  
        .fill();  
          
    sAngle-=Math.PI/2, eAngle -= Math.PI/2;  
    plot.beginPath()  
        .arc(0, -r/2, r/2, sAngle, eAngle, 0)  
        .closePath()  
        .fill();  
          
    sAngle-=Math.PI/2, eAngle -= Math.PI/2;  
    plot.beginPath()  
        .arc(-r/2, 0, r/2, sAngle, eAngle, 0)  
        .closePath()  
        .fill();  
      
    sAngle-=Math.PI/2, eAngle -= Math.PI/2;  
    plot.beginPath()  
        .arc(0, r/2, r/2, sAngle, eAngle, 0)  
        .closePath()  
        .fill();  
          
    plot.restore();  
  

	
}

//题10 <3>
function myDraw() {   
    var config = new PlotConfiguration();    
    config.init();    
    config.setPreference();   
	config.setSector(1,1,1,1);
	config.axis2D(0, 0, 180);
    /*
	var color = ['red', 'green', 'blue', 'orange', 'cyan', 'purple', 'pink'];
	

	var rx, ry;
	var signX = signY = -1;*/
	
	var r = 100;
	var x0 = 0, y0 = 0;  
  
    var style1 = '#FF0066', style2 = '#0066FF';  
    var sAngle = 0, eAngle = Math.PI;   
	  
    //两个半圆拼成整圆  
    plot.setFillStyle(style1);  
    plot.beginPath()  
        .arc(0, 0, r, sAngle, eAngle, 0)  
        .closePath()  
        .fill();  
		
	plot.setFillStyle(style2);  
    plot.beginPath()  
        .arc(0, 0, r, sAngle, eAngle, 1)  
        .closePath()  
        .fill();  	   
      
  
    //大半圆  
    plot.save()  
        .setFillStyle(style2);  
          
    plot.beginPath()  
        .arc(r/2,0, r/2, sAngle, eAngle, 0)  
        .closePath()  
        .fill();  
          
	plot.save()  
        .setFillStyle(style1);  
    
    plot.beginPath()  
        .arc(-r/2, 0, r/2, sAngle, eAngle, 1)  
        .closePath()  
        .fill();  
	
}

//题10 <4>
function myDraw() {   
    var config = new PlotConfiguration();    
    config.init();    
    config.setPreference();   
	config.setSector(1,1,1,1);
	config.axis2D(0, 0, 180);
    
	var color = ['red', 'green', 'blue', 'orange', 'cyan', 'purple', 'pink'];
	
	var r = 100;
 
    var style1 = color[0], style2 = color[1];  


	plot.save()
		.rotate(-Math.PI/6);

	
	for (var i = 0; i < 2; i++) {
		for (var j = 0; j < 2; j++) {
			var signX = Math.pow(-1, i);
			var signY = Math.pow(-1, j);
			
			if (j % 2 == 0) {
			plot.setFillStyle(color[(i+j)%2])
				.beginPath()  
				.moveTo(0, 0)
				.lineTo(signX*r, 0)
				.arcTo(signX*r, signY*r, 0, signY*r, r, r)				
				.closePath()  
				.fill();	
			}
			else {
				plot.setFillStyle(color[(i+j)%2])
				.beginPath()  
				.moveTo(0, 0)
				.lineTo(0, signY *r)
				.arcTo(signX*r, signY*r, signX*r, 0, r, r)				
				.closePath()  
				.fill();	
			}
			

		}
		
		
	}
  
  
    //大半圆  
	var sAngle = 0, eAngle = Math.PI;  
    plot.setFillStyle(style2);  
          
    plot.beginPath()  
        .arc(r/2, 0, r/2, sAngle, eAngle, 0)  
        .closePath()  
        .fill();  
          
    sAngle-=Math.PI/2, eAngle -= Math.PI/2; 
	plot.setFillStyle(style1);  
    plot.beginPath()  
        .arc(0, -r/2, r/2, sAngle, eAngle, 0)  
        .closePath()  
        .fill();  
          
	 plot.setFillStyle(style2);  
    sAngle-=Math.PI/2, eAngle -= Math.PI/2;  
    plot.beginPath()  
        .arc(-r/2, 0, r/2, sAngle, eAngle, 0)  
        .closePath()  
        .fill();  
      
	 plot.setFillStyle(style1);  
    sAngle-=Math.PI/2, eAngle -= Math.PI/2;  
    plot.beginPath()  
        .arc(0, r/2, r/2, sAngle, eAngle, 0)  
        .closePath()  
        .fill();  
          
   plot.restore();

	
}

这样就全部完成了。

还有小伟进行的测试：

//arcTo测试
function myDraw() {   
    var config = new PlotConfiguration();    
    config.init();    
    config.setPreference();   
	config.setSector(1,1,1,1);
	config.axis2D(0, 0, 180);
    
	var color = ['red', 'green', 'blue', 'orange', 'cyan', 'purple', 'pink'];
	var r = 100;
	shape.strokeCircle(0, 0, r);
	
	for (var i = 0; i < 2; i++) {
		plot.setFillStyle(color[i%7])
			.beginPath()
			.moveTo(0, 0)
			.arcTo(r, 0, r, r, r)
			.closePath()
			.fill();
			
		r *= 0.5;
	}
		
	
}


//arcTo测试
function myDraw() {   
    var config = new PlotConfiguration();    
    config.init();    
    config.setPreference();   
	config.setSector(1,1,1,1);
	config.axis2D(0, 0, 180);
    
	var color = ['red', 'green', 'blue', 'orange', 'cyan', 'purple', 'pink'];
	var r = 100;

	var rx = r * Math.cos(Math.PI/6), ry = r * Math.sin(Math.PI/6);
	
	for (var i = 0; i < 25; i++) {
		rx = r * Math.cos(Math.PI/12*i), ry = r * Math.sin(Math.PI/12*i);
		plot.setFillStyle(color[i%7])
			.beginPath()
			.moveTo(0, 0)
			.arcTo(0+rx, 0, 0+rx, 0-ry, r)
			.closePath()
			.fill();
			
	}	
	
}

这些代码会得到：

接下来就是计算了。

>>> S = lambda d : 1/4*3.1416*d*d;
>>> 2*S(1);
1.5708
>>> C = lambda d : 3.1416*d;
>>> 2*C(1);
6.2832

>>> S(33)-S(14)-(S(26.4)-S(14.4));
316.83

>>> C(13.5)/2+1.575*2
24.3558
>>> S(13.5)/2+1.575*13.5
92.832

>>> C(2.4)
7.53984
>>> S(20)
314.16

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