【背景知识】

公元前三世纪，欧几里得在《几何原本》中记载了正方形，正五边形，正六边形的做法，后来人们也掌握了正十五边形作图，但之后两千多年，人们没有在更高阶边形上取得突破。

1796年，19岁的高斯证明了正17边形可以由尺规作图作出，但没有给出具体做法；

1825年Johanes Erchinger发表了第一个正十七边形尺规作图法；

1898年，高斯的孙子发现了高斯在1796年3月30日关于正17边形作图的手稿，可以推断，高斯至少在当时在草稿纸上完成了作图分析过程。

1832年，里奇罗特发表了正257边形尺规作图法，手稿长达80页。

1894年，德国数学家Johann Gustav Hermes发表了正65537边形尺规作图法，这是目前人类最复杂的尺规作图，手稿保存在德国哥廷根大学。

我用canvas制作了正十七边形光阑，此种类型光阑多用于显微镜采光口。借此向伟大数学家高斯致敬。

代码没有经过大改变，只是在 http://www.cnblogs.com/xiandedanteng/p/8735444.html 的基础上把angleCount改成了17，另外优化了getColor函数。

效果见下面五个图形，想看动画效果请自行下载代码然后用chrome浏览器打开。或者从 https://files.cnblogs.com/files/xiandedanteng/17%E5%85%89%E9%98%91.rar下载录像观看。

代码下载地址：https://files.cnblogs.com/files/xiandedanteng/20180408_17guanglan.rar

本作Github url：https://github.com/horn19782016/iris-aperture

代码如下：

  1. <!DOCTYPE html>
  2. <html lang="utf-8">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  4. <head>
  5.      <title>17角光阑 2018年4月8日 向高斯致敬</title>
  6.     </head>
  7.  
  8.      <body onload="draw()">
  9.         <canvas id="myCanvus" width="400px" height="400px" style="border:1px dashed black;">
  10.             出现文字表示你的浏览器不支持HTML5
  11.         </canvas>
  12.      </body>
  13. </html>
  14. <script type="text/javascript">
  15. <!--
  16. function draw(){
  17.     var canvas=document.getElementById('myCanvus');
  18.     canvas.width=400;
  19.     canvas.height=400;    
  20.  
  21.     context=canvas.getContext('2d');
  22.     context.translate(200,200);
  23.  
  24.     slot=new Slot();
  25.     animate();
  26. };
  27.  
  28. var delta=0;    // 旋转角
  29. var radius=0;    // 旋转半径
  30. var outerRad=200;// 外径
  31. var context;    // 绘画上下文
  32. var slot;        // 光阑对象
  33. var angleCount=17;// 三角光阑为3，四角光阑为4，六角光阑为6
  34.  
  35. function animate(){
  36.     context.clearRect(-200,-200,400,400);// 清屏
  37.  
  38.     slot.update(radius,delta,outerRad);
  39.     slot.paintBg(context);
  40.     slot.paint(context);
  41.     slot.paintBase(context);
  42.  
  43.     delta+=0.5;
  44.     radius+=1;
  45.  
  46.     if(radius<outerRad*0.9){
  47.         window.requestAnimationFrame(animate);// 让浏览器自行决定帧速率
  48.     }
  49. }
  50.  
  51. function Slot(){
  52.     var obj=new Object;
  53.  
  54.     obj.ax=0;
  55.     obj.ay=0;
  56.     obj.bx=0;
  57.     obj.by=0;
  58.     obj.cx=0;
  59.     obj.cy=0;
  60.     obj.angleA=0;
  61.     obj.angleB=0;
  62.     obj.angleC=0;
  63.     obj.radius=0;
  64.     obj.outerRad=0;
  65.     obj.img=new Image();
  66.     obj.img.src="earth.jpg";    
  67.  
  68.     // 计算
  69.     obj.update=function(radius,theta,outerRad){
  70.         this.radius=radius;
  71.         this.outerRad=outerRad;        
  72.  
  73.         var alpha=Math.acos(radius/outerRad);
  74.         this.angleA=getRad(theta)+alpha;
  75.         this.ax=outerRad*Math.cos(this.angleA);
  76.         this.ay=outerRad*Math.sin(this.angleA);
  77.  
  78.         var R=radius/Math.cos(Math.PI/angleCount);
  79.         this.angleB=getRad(theta)-Math.PI/angleCount;
  80.  
  81.         this.bx=R*Math.cos(this.angleB);
  82.         this.by=R*Math.sin(this.angleB);
  83.  
  84.         this.angleC=this.angleA-2*Math.PI/angleCount;
  85.         this.cx=outerRad*Math.cos(this.angleC);
  86.         this.cy=outerRad*Math.sin(this.angleC);
  87.     };
  88.  
  89.     // 画背景
  90.     obj.paintBg=function(ctx){
  91.         context.drawImage(this.img,0,0,800,800,-200,-200,400,400);
  92.     };
  93.  
  94.     // 描光阑
  95.     obj.paint=function(ctx){
  96.  
  97.         for(var i=0;i<angleCount;i++){
  98.             ctx.save();
  99.  
  100.             ctx.fillStyle = getColor(i % 9);
  101.             ctx.rotate(2*Math.PI/angleCount*i);
  102.  
  103.             ctx.beginPath();
  104.             ctx.moveTo(this.ax,this.ay);
  105.             ctx.lineTo(this.bx,this.by);
  106.             ctx.lineTo(this.cx,this.cy);
  107.             ctx.arc(0,0,this.outerRad,this.angleC,this.angleA,false);
  108.             ctx.closePath();
  109.             ctx.fill();
  110.  
  111.             ctx.restore();
  112.         }
  113.     };
  114.  
  115.     // 描基座
  116.     obj.paintBase=function(ctx){
  117.         ctx.strokeStyle = "black";
  118.  
  119.         for(var i=0;i<4;i++){
  120.             ctx.save();
  121.             ctx.fillStyle = getColor(13);
  122.             ctx.rotate(Math.PI/2*i);
  123.  
  124.             ctx.beginPath();
  125.  
  126.             ctx.arc(0,0,this.outerRad,0,Math.PI/2,false);
  127.             ctx.lineTo(this.outerRad,this.outerRad);
  128.             ctx.lineTo(this.outerRad,0);
  129.  
  130.             ctx.closePath();
  131.             ctx.fill();
  132.  
  133.             ctx.restore();
  134.         }
  135.     };
  136.  
  137.     return obj;
  138. }
  139.  
  140. // 角度得到弧度
  141. function getRad(degree){
  142.     return degree/180*Math.PI;
  143. }
  144.  
  145. // 得到颜色
  146. function getColor(index){
  147.     var arr=["green","silver","lime","gray",
  148.              "white","yellow","maroon","navy",
  149.              "red","blue","purple","teal","fuchsia",
  150.              "aqua","black"];
  151.  
  152.     if(index>arr.length){
  153.         index=index % arr.length;
  154.     }
  155.  
  156.     return arr[index];
  157. }
  158.  
  159. //-->
  160. </script>

【Canvas】动态正17边光阑 向高斯致敬的更多相关文章

  1. canvas动态小球重叠效果

    前面的话 在javascript运动系列中,详细介绍了各种运动,其中就包括碰壁运动.但是,如果用canvas去实现,却是另一种思路.本文将详细介绍canvas动态小球重叠效果 效果展示 静态小球 首先 ...

  2. Canvas 动态小球重叠效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 微信小程序分享朋友圈 长海报 canvas 动态高度计算

    业务场景 在微信中 小程序无法分享到朋友圈,目前大部分的解决方案都是,canvas动态绘制 生成图片后,保存到用户相册,用户进行分享照片到朋友圈,朋友圈打开图片后识别二维码进入小程序,达到分享目的 g ...

  4. [Canvas]动态背景

    欲查看动态效果请点击下载代码再用Chrome或Firefox打开index.html 图例: 代码: <!DOCTYPE html> <html lang="utf-8&q ...

  5. canvas动态绘制饼状图，

    当我们使用Echrts很Highcharts的时候,总是觉得各种统计图表是多么神奇,今天我就用现代浏览器支持的canvas来绘制饼状统计图,当然仅仅是画出图并没什么难度,但是统计图一般都有输入,根据不 ...

  6. canvas 动态画线

    <!--实现鼠标按下的时候,移动进行绘制,鼠标抬起结束绘图,用到的事件有mousedown mousemove mouseup用的的canvas api 有 beginPath moveTo l ...

  7. canvas 动态飞速旋转的矩形

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  8. HTML5 进阶系列：canvas 动态图表

    前言 canvas 强大的功能让它成为了 HTML5 中非常重要的部分,至于它是什么,这里就不需要我多作介绍了.而可视化图表,则是 canvas 强大功能的表现之一. 现在已经有了很多成熟的图表插件都 ...

  9. canvas动态图标

    前言 canvas 强大的功能让它成为了 HTML5 中非常重要的部分,至于它是什么,这里就不需要我多作介绍了.而可视化图表,则是 canvas 强大功能的表现之一. 现在已经有了很多成熟的图表插件都 ...

随机推荐

  1. Android之安全机制

    根据android四大框架来解说安全机制 代码安全 java不同于C/C++,java是解释性语言,存在代码被反编译的隐患: 默认混淆器为proguard,最新版本为4.7: proguard还可用来 ...

  2. zookeeper【5】分布式锁

    我们常说的锁是单进程多线程锁,在多线程并发编程中,用于线程之间的数据同步,保护共享资源的访问.而分布式锁,指在分布式环境下,保护跨进程.跨主机.跨网络的共享资源,实现互斥访问,保证一致性. 架构图: ...

  3. HashMap和Hashtable的区别--List,Set,Map等接口是否都继承自Map接口--Collection和Collections的区别

    面试题: 1.HashMap和Hashtable的区别? HashMap:线程不安全,效率高,键和值都允许null值 Hashtable:线程安全,效率低,键和值都不允许null值 ArrayList ...

  4. echarts3相关的各种定制化

    在我刚把项目中的echarts从2.x版本升级到echarts3.x,折腾老久,终于交付了项目的时候,echarts4又出来了,先不管,还是把我echarts3.x遇到的和formatter相关的问题 ...

  5. Oracle体系结构及备份（十六）——bg-ckpt

    一  什么是CKPT进程 作用: 发出信号给DBWn 更新数据文件头 更新控制文件 At specific times, all modified databasebuffers in the sys ...

  6. HDOJ 4876 ZCC loves cards

    枚举组合,在不考虑连续的情况下推断能否够覆盖L...R,对随机数据是一个非常大的减枝. 通过检測的暴力计算一遍 ZCC loves cards Time Limit: 4000/2000 MS (Ja ...

  7. sql语句分组/排序/计算总数/连接等sql语句书写

    1.什么是表连接? 答:比如两张表,要获取的信息来自两张表,就需要通过外键的形式进行两张表的连接.最后产后组合信息. 表连接是通过join连接的.表连接说白了就是产生一个大表.表连接也都是用于查询上的 ...

  8. mac 下 outlook 邮箱 服务器端口设置

  9. UCOS移植心得(

    移植UCOS之前,你首先应该做好三件事: 1．弄懂UCOS,这是谁都知道的哦 ^_^ 2. 弄懂你想要移植到的硬件平台 3. 清楚你使用的编译器是如何处理函数的局部变量和怎么样处理函数间的参数传递 这 ...

  10. .NET：CLR via C# Thread Basics

    A thread is a Windows concept whose job is to virtualize the CPU. Thread Overhead Thread kernel obje ...