这回把光阑代码统一了，修改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. [PE484]Arithmetic Derivative

    题意:对整数定义求导因子$'$:$p'=1,(ab)'=a'b+ab'$,求$\sum\limits_{i=2}^n(i,i')$ 这个求导定义得比较妙:$(p^e)'=ep^{e-1}$ 推一下就可 ...

  2. 51Nod 快速傅里叶变换题集选刷

    打开51Nod全部问题页面,在右边题目分类中找到快速傅里叶变换,然后按分值排序,就是本文的题目顺序. 1.大数乘法问题 这个……板子就算了吧. 2.美妙的序列问题 长度为n的排列,且满足从中间任意位置 ...

  3. 【BZOJ】4152: [AMPPZ2014]The Captain【SLF优化Spfa】

    4152: [AMPPZ2014]The Captain Time Limit: 20 Sec  Memory Limit: 256 MBSubmit: 2107  Solved: 820[Submi ...

  4. 原生+H5开发之：Android webview配置

    在上一篇文章Android 原生开发.H5.React-Native开发特点,我们可以了解到三种Android开发方式的区别和优缺点.[Android开发:原生+H5]系列的文章,将主要讲解Andro ...

  5. 【spark系列3】spark开发简单指南

    分布式数据集创建之textFile         文本文件的RDDs能够通过SparkContext的textFile方法创建,该方法接受文件的URI地址(或者机器上的文件本地路径,或者一个hdfs ...

  6. USB PIC Programmer (Brenner8)

    http://uzzors2k.4hv.org/index.php?page=usbpicprog My Tait Serial programmer works alright, but not e ...

  7. hdu 4647 Another Graph Game,想到了就是水题了。。

    题目是给一个无向图,其中每个节点都有点权,边也有边权,然后就有2个小朋友开始做游戏了ALICE &BOB 游戏规定ALICE 先行动然后是BOB,然后依次轮流行动,行动时可以任意选取一个节点并 ...

  8. Apache Mina入门

    Mina第一次听到这个名称的时候,我以为是个MM的名字米娜,后来才知道… Apache MINA(Multipurpose Infrastructure for Network Application ...

  9. SSH深度历险（四） Maven初步学�

    这几天接触这个词,非常多遍了,仅仅是浅显的体会到它在GXPT中的优点,功能之强大,又通过网络查询了资料进一步的认识学习了,和大家分享. Maven是基于项目对象模型(POM),能够通过一小段描写叙述信 ...

  10. C#中,为什么在值类型后面加问号

    在C#中,声明一个值类型或引用类型的变量,无论是否给这个变量赋初值,该变量都有默认值: 比如声明引用类型变量: string a,其等效于string a = null,string的默认值为null ...