[从头学数学] 第94节圆

来源：互联网发布：体彩外围软件编辑：程序博客网时间：2024/04/28 22:59

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

正剧开始：

星历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*224.3558>>> S(13.5)/2+1.575*13.592.832

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

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

0 0

[从头学数学] 第94节 圆

[从头学数学] 第94节圆