【背景知识】

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

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

代码如下：

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>17角光阑 2018年4月8日 向高斯致敬</title>
    </head>

     <body onload="draw()">
        <canvas id="myCanvus" width="400px" height="400px" style="border:1px dashed black;">
            出现文字表示你的浏览器不支持HTML5
        </canvas>
     </body>
</html>
<script type="text/javascript">
<!--
function draw(){
    var canvas=document.getElementById('myCanvus');
    canvas.width=400;
    canvas.height=400;    

    context=canvas.getContext('2d');
    context.translate(200,200);

    slot=new Slot();
    animate();
};

var delta=0;    // 旋转角
var radius=0;    // 旋转半径
var outerRad=200;// 外径
var context;    // 绘画上下文
var slot;        // 光阑对象
var angleCount=17;// 三角光阑为3，四角光阑为4，六角光阑为6

function animate(){
    context.clearRect(-200,-200,400,400);// 清屏

    slot.update(radius,delta,outerRad);
    slot.paintBg(context);
    slot.paint(context);
    slot.paintBase(context);

    delta+=0.5;
    radius+=1;

    if(radius<outerRad*0.9){
        window.requestAnimationFrame(animate);// 让浏览器自行决定帧速率
    }
}

function Slot(){
    var obj=new Object;

    obj.ax=0;
    obj.ay=0;
    obj.bx=0;
    obj.by=0;
    obj.cx=0;
    obj.cy=0;
    obj.angleA=0;
    obj.angleB=0;
    obj.angleC=0;
    obj.radius=0;
    obj.outerRad=0;
    obj.img=new Image();
    obj.img.src="earth.jpg";    

    // 计算
    obj.update=function(radius,theta,outerRad){
        this.radius=radius;
        this.outerRad=outerRad;        

        var alpha=Math.acos(radius/outerRad);
        this.angleA=getRad(theta)+alpha;
        this.ax=outerRad*Math.cos(this.angleA);
        this.ay=outerRad*Math.sin(this.angleA);

        var R=radius/Math.cos(Math.PI/angleCount);
        this.angleB=getRad(theta)-Math.PI/angleCount;

        this.bx=R*Math.cos(this.angleB);
        this.by=R*Math.sin(this.angleB);

        this.angleC=this.angleA-2*Math.PI/angleCount;
        this.cx=outerRad*Math.cos(this.angleC);
        this.cy=outerRad*Math.sin(this.angleC);
    };

    // 画背景
    obj.paintBg=function(ctx){
        context.drawImage(this.img,0,0,800,800,-200,-200,400,400);
    };

    // 描光阑
    obj.paint=function(ctx){

        for(var i=0;i<angleCount;i++){
            ctx.save();

            ctx.fillStyle = getColor(i % 9);
            ctx.rotate(2*Math.PI/angleCount*i);

            ctx.beginPath();
            ctx.moveTo(this.ax,this.ay);
            ctx.lineTo(this.bx,this.by);
            ctx.lineTo(this.cx,this.cy);
            ctx.arc(0,0,this.outerRad,this.angleC,this.angleA,false);
            ctx.closePath();
            ctx.fill();

            ctx.restore();
        }
    };

    // 描基座
    obj.paintBase=function(ctx){
        ctx.strokeStyle = "black";

        for(var i=0;i<4;i++){
            ctx.save();
            ctx.fillStyle = getColor(13);
            ctx.rotate(Math.PI/2*i);

            ctx.beginPath();

            ctx.arc(0,0,this.outerRad,0,Math.PI/2,false);
            ctx.lineTo(this.outerRad,this.outerRad);
            ctx.lineTo(this.outerRad,0);

            ctx.closePath();
            ctx.fill();

            ctx.restore();
        }
    };

    return obj;
}

// 角度得到弧度
function getRad(degree){
    return degree/180*Math.PI;
}

// 得到颜色
function getColor(index){
    var arr=["green","silver","lime","gray",
             "white","yellow","maroon","navy",
             "red","blue","purple","teal","fuchsia",
             "aqua","black"];

    if(index>arr.length){
        index=index % arr.length;
    }

    return arr[index];
}

//-->
</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. 数据准备<4>:变量筛选-理论篇

    在上一篇文章<数据准备<3>:数据预处理>中,我们提到降维主要包括两种方式:基于特征选择的降维和基于维度转换的降维,其中基于特征选择的降维通俗的讲就是特征筛选或者变量筛选,是指 ...

  2. 利用meterpreter下的Venom免杀后门

    转载请注明作者:admin-神风 下载地址:https://github.com/r00t-3xp10it/venom .从Github上下载框架: tar.gz OR zip OR git clon ...

  3. [BJOI2010]次小生成树

    OJ题号: BZOJ1977.COGS2453 题目大意: 给你一个无向连通图,求严格次小生成树. 思路: 对于一般次小生成树,我们有一个结论:一般次小生成树一定可以通过替换掉最小生成树某一条边得到. ...

  4. N！（N的阶乘）最末位非0的求解方法

    问题是求关于N!的最后一位非0位, 如3!=6,最后一位非0位为6, 5!=120, 最后一位非0位为2.怎么样快速的求出最后一位非0位呢? 最朴素的想法就是先求出N!的结果,再求出结果的最后一位非0 ...

  5. Loj10167 HDU2089 不要62

    题目描述 杭州人称那些傻乎乎粘嗒嗒的人为 626262(音:laoer). 杭州交通管理局经常会扩充一些的士车牌照,新近出来一个好消息,以后上牌照,不再含有不吉利的数字了,这样一来,就可以消除个别的士 ...

  6. Codeforces Beta Round #97 (Div. 1) C. Zero-One 数学

    C. Zero-One 题目连接: http://codeforces.com/contest/135/problem/C Description Little Petya very much lik ...

  7. 在 CentOS 和 RHEL 上安装 Puppet 服务器和客户端

    https://linux.cn/article-3959-1.html https://docs.puppet.com/

  8. mysqld --debug=d:t:i:O:n --user=mysql （源码调试)

    --debug=d:t--debug=d:f,main,subr1:F:L:t,20--debug=d,input,output,files:n--debug=d:t:i:O,\\mysqld.tra ...

  9. 重写Html.DropDownList和Html.DropDownListFor的name属性

    □ 重写前 通常这样写: @Html.DropDownListFor(m => m.DelFlag,(List<SelectListItem>)ViewBag.d,"==请 ...

  10. 撤销正在审核的app

    一个app还未通过审核,但是新版本已经出来了,怎样才能撤销正在审核的app呢? 方法:在 是binary deatils里用 reject this binary.之后,即可以重新上传代码了.