这回把光阑代码统一了，修改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. bzoj 3282

    回顾一下LCT,容易写错的地方: 1.每次断掉Splay中的边,必须update一下父亲节点,再根据具体情况是否splay父亲节点. 2.养成没有用的值(比如当pre[u]不为0时的pnt[u])不去 ...

  2. Educational Codeforces Round 13 B. The Same Calendar 水题

    B. The Same Calendar 题目连接: http://www.codeforces.com/contest/678/problem/B Description The girl Tayl ...

  3. Codeforces Round #280 (Div. 2) E. Vanya and Field 思维题

    E. Vanya and Field time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  4. java 反射机制之 getDeclaredMethod（）获取方法，然后invoke执行实例对应的方法

    关于反射中getDeclaredMethod().invoke()的学习,来源于项目中的一行代码: SubjectService.class.getDeclaredMethod(autoMatchCo ...

  5. elasticsearch ik中文分词器安装

    特殊说明:灰色文字用来辅助理解的. 安装IK中文分词器 我在百度上搜索了下,大多介绍的都是用maven打包下载下来的源码,这种方法也行,但是不够方便,为什么这么说? 首先需要安装maven吧?其次需要 ...

  6. 关于php一些问题

    为什么说php是弱语言? 本身不严格区分变量的类型. 为什么说php是动态语言? 程序在运行时可以改变其结构.所谓的动态类型语言,意思就是类型的检查是在运行时做的. 为什么说php是脚本语言? 不需要 ...

  7. 事件冒泡 比bubble

    冒泡的概念就是 当子元素触发事件的时候 相应的祖宗十八代素也会触发相同的事件(前提父元素也添加了一样的事件)eg:儿子 有一个onclick 祖宗十八代 也有onclick 当点击儿子的时候 祖宗十八 ...

  8. golang 字符串与整数, 布尔转换 strconv

    strconv 是golang对于字符串和基本数据类型之间的转换字符串转整数testStr := "1000" testInt, err := strconv.Atoi(testS ...

  9. 正则表达式校验15/18位生份证-JAVA版

    public static boolean isIDNumber(String iDNumber) { if (iDNumber == null || "".equals(iDNu ...

  10. 解决ElasticSearch5.x中@Field注解之IK分词不能用的问题

    一.概述 环境:ElasticSearch版本5.6.3,SpringBoot 2.0.2.RELEASE,索引myIndex 问题描述:使用@Field注解给实体类指定ik分词解析器(ik_smar ...