这回把光阑代码统一了，修改angleCount的数目为3就是三角光阑，angleCount的数目为4就是四角光阑，angleCount的数目为6就是六角光阑，目前代码中是12角光阑。

图示：

代码：

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>N角光阑 2018年4月7日</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=12;// 三角光阑为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+=1;
    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;    

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

        this.img=new Image();
        this.img.src="earth.jpg";
        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+5);
            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.stroke();
            ctx.fill();

            ctx.restore();
        }
    };

    return obj;
}

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

// 得到颜色
function getColor(index){
    if(index==0){
        return "green";
    }else if(index==1){
        return "silver";
    }else if(index==2){
        return "lime";
    }else if(index==3){
        return "gray";
    }else if(index==4){
        return "white";
    }else if(index==5){
        return "yellow";
    }else if(index==6){
        return "maroon";
    }else if(index==7){
        return "navy";
    }else if(index==8){
        return "red";
    }else if(index==9){
        return "blue";
    }else if(index==10){
        return "purple";
    }else if(index==11){
        return "teal";
    }else if(index==12){
        return "fuchsia";
    }else if(index==13){
        return "aqua";
    }else if(index==14){
        return "black";
    }else{
        return getColor(index % 15);
    }
}

//-->
</script>

代码下载：

https://files.cnblogs.com/files/xiandedanteng/49-nAngleGuanglan.rar

【canvas】N角光阑的更多相关文章

  1. HTML5 Canvas 六角光阑动态效果

    光阑是光具组件中光学元件的边缘.框架或特别设置的带孔屏障,本人实现了结构比较简单的六角光阑,效果有点像宇航员在徐徐张开的飞船舷窗中看到逐渐完整的地球,下面四张图可以感受一下. 当然看动态效果才能真正体 ...

  2. 【canvas】四角光阑

    代码: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type ...

  3. 【canvas】三角光阑

    代码: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type ...

  4. 【python】列出http://www.cnblogs.com/xiandedanteng中所有博文的标题

    代码: # 列出http://www.cnblogs.com/xiandedanteng中所有博文的标题 from bs4 import BeautifulSoup import requests u ...

  5. Node.js 网页爬虫再进阶，cheerio助力

    任务还是读取博文标题. 读取app2.js // 内置http模块,提供了http服务器和客户端功能 var http=require("http"); // cheerio模块, ...

  6. Node.js 网页瘸腿稍强点爬虫再体验

    这回爬虫走得好点了,每次正常读取文章数目总是一样的,但是有程序僵住了情况,不知什么原因. 代码如下: // 内置http模块,提供了http服务器和客户端功能 var http=require(&qu ...

  7. Node.js 网页瘸腿爬虫初体验

    延续上一篇,想把自己博客的文档标题利用Node.js的request全提取出来,于是有了下面的初哥爬虫,水平有限,这只爬虫目前还有点瘸腿,请看官你指正了. // 内置http模块,提供了http服务器 ...

  8. 【Canvas】动态正17边光阑 向高斯致敬

    [背景知识] 公元前三世纪,欧几里得在<几何原本>中记载了正方形,正五边形,正六边形的做法,后来人们也掌握了正十五边形作图,但之后两千多年,人们没有在更高阶边形上取得突破. 1796年,1 ...

  9. canvas快速绘制圆形、三角形、矩形、多边形

    想看前面整理的canvas常用API的同学可以点下面: canvas学习之API整理笔记(一) canvas学习之API整理笔记(二) 本系列文章涉及的所有代码都将上传至:项目代码github地址,喜 ...

随机推荐

  1. [CF1053C]Putting Boxes Together(线段树)

    http://codeforces.com/blog/entry/62013 两个结论: 1.一定有一个箱子不用动. 2.不动的箱子一定是加权前缀和为S/2的那个. 1显然,2由1易得. 于是问题变为 ...

  2. bzoj 4127 线段树维护绝对值之和

    因为d>=0,所以一个位置的数只会单调不降并且只会有一次穿过0. 用这个性质,我们我可在线段树中记录正数负数的个数和和,以及最大的负数以及答案. 修改操作:如果当前最大负数+d<=0,那么 ...

  3. wikioi 1048 石子归并

    dp[i][j]=min(dp[i][j],dp[i][k],dp[k+1][j]+sum[i][j]); 表示i-j的最小合并代价. #include <iostream> #inclu ...

  4. Qt线程外使用Sleep

    一:方法1 QTime t; t.start(); while(t.elapsed()<1000){     QCoreApplication::processEvents();} 二:方法2 ...

  5. 微信小程序 scroll-view隐藏横向滚动条

    ::-webkit-scrollbar { width: 0; height: 0; color: transparent; }

  6. PostgreSQL增强版命令行客户端（pgcli）

    效果: 安装: https://www.pgcli.com/install 官网: https://www.pgcli.com/

  7. The YubiKey NEO

    The YubiKey NEO The YubiKey line of hardware one-time-password (OTP) generators has been on the mark ...

  8. 打印后台程序服务没有启动，每次打开Powerdesigner都会要我安装打印机

    原因: 不光这个,就是word也需要你有个打印机.随便安一个就可以了.一般系统自带个Microsoft Office Document Image Writer的还报打印机,要是你有这个打印机的话.查 ...

  9. 【笨木头Lua专栏】基础补充05：迭代器番外篇

    关于迭代器的内容, 另一点点,只是已经无关紧要了.应该算是一种扩展吧.就一起来开开眼界好了~ 笨木头花心贡献.哈?花心?不.是用心~ 转载请注明,原文地址: http://www.benmutou.c ...

  10. LR杂记-nmon+analyser监控linux系统资源

    1.查看linux具体版本号信息 file /sbin/init 2.下载相应nmon版本号 http://pkgs.repoforge.org/nmon/ 3.安装 rpm -ivh nmon-14 ...