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

当然看动态效果才能真正体验，要看完整的演示请下载：https://files.cnblogs.com/files/xiandedanteng/slotAnimation20170908.rar 并用chrome打开。

代码如下：

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>六角光阑</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;

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){
        // 让浏览器自行决定帧速率
        window.requestAnimationFrame(animate);
    }
}

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

function Slot(){
    var obj=new Object;

    obj.bx=0;
    obj.by=0;
    obj.cx=0;
    obj.cy=0;
    obj.dx=0;
    obj.dy=0;
    obj.angleC=0;
    obj.angleD=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;

        this.bx=radius*Math.cos(getRad(theta+60));
        this.by=radius*Math.sin(getRad(theta+60));

        var alpha=Math.asin(radius*Math.sin(getRad(60))/this.outerRad);
        this.angleC=getRad(theta)+alpha;
        this.cx=outerRad*Math.cos(this.angleC);
        this.cy=outerRad*Math.sin(this.angleC);

        this.angleD=this.angleC-Math.PI/3;
        this.dx=outerRad*Math.cos(this.angleD);
        this.dy=outerRad*Math.sin(this.angleD);
    };

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

    // 描光阑
    obj.paint=function(ctx){
        ctx.strokeStyle = "black";

        for(var i=0;i<6;i++){
            ctx.save();
            ctx.fillStyle = getColor(i+5);
            ctx.rotate(Math.PI/3*i);

            ctx.beginPath();

            ctx.lineTo(this.bx,this.by);
            ctx.lineTo(this.dx,this.dy);
            ctx.arc(0,0,this.outerRad,this.angleD,this.angleC,false);
            ctx.lineTo(this.bx,this.by);

            ctx.closePath();
            ctx.stroke();
            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 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";
    }
}

//-->
</script>

HTML5 Canvas 六角光阑动态效果的更多相关文章

  1. HTML5 Canvas 八星聚义动态效果

    昔有石碣村七星聚义,今有Canvas八星聚义.动态效果是,八颗星以等速螺线慢慢向中心聚集,最后汇聚成一颗. 效果: 代码: <!DOCTYPE html> <html lang=&q ...

  2. 【canvas】N角光阑

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

  3. HTML5 Canvas 绘制六叶草

    注意: context.arc(横坐标,纵坐标,弧半径,起始角度,终止角度,逆顺时针);这个函数挺难用,主要原因是最后参数和角度的关系.不管文档怎么说,按我的实际经验,逆顺时针=false时,是逆时针 ...

  4. HTML5 Canvas arc()函数//////////////////////(转)

    HTML5 Canvas arc()函数   实例 创建一个圆形: var c=document.getElementById("myCanvas"); var ctx=c.get ...

  5. HTML5 Canvas arc()函数

    实例 创建一个圆形: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d") ...

  6. HTML5 canvas绘制线条曲线

    HTML5 canvas入门 线条例子 1.简单线条 2.三角形 3.填充三角形背景颜色 4.线条颜色以及线条大小 5.二次贝塞尔曲线 6.三次贝塞尔曲线 <!doctype html> ...

  7. 纯JavaScript实现HTML5 Canvas六种特效滤镜

    纯JavaScript实现HTML5 Canvas六种特效滤镜  小试牛刀,实现了六款简单常见HTML5 Canvas特效滤镜,并且封装成一个纯 JavaScript可调用的API文件gloomyfi ...

  8. [js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)

    上文,写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具),本文主要是关于线条的样式设置 lineWidth: 设置线条的宽 ...

  9. [js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)

    接着上文[js高手之路] html5 canvas系列教程 - 状态详解(save与restore),相信大家都应该玩过美颜功能,而我们今天要讲的就是canvas强大的像素处理能力,通过像素处理,实现 ...

随机推荐

  1. package-lock.json 文件的作用

    npm5之后安装文件之后会多出一个package-lock.json的文件,它的作用是: 1. 安装之后锁定包的版本,手动更改package.json文件安装将不会更新包,想要更新只能使用 npm i ...

  2. 使用vue-cli开发时跨域问题

    打开config文件夹下的index.js,配置proxyTable: { ... dev:{ ... proxyTable: { '/api': { target: 'http://localhos ...

  3. shortcut（NOIP模拟赛）（裸的排序）

    原题: Description Mirek有一条每天从他家去大学工作的最喜欢的路.这个路径由若干个部分组成,且每个部分是10米长的直线.每一个部分是直线连接(没有拐弯)上一个部分或垂直连接上一个部分. ...

  4. glOrthof 与glFrustumf

    http://www.java123.net/v/533543.html glViewport()函数和glOrtho()函数的理解(转) 在OpenGL中有两个比较重要的投影变换函数,glViewp ...

  5. java应用挂死故障排查

    现象: java开发的web应用无法访问 排查: 1．从resin/log/watchdog-manager.log的日志里可以看出来,jvm的内存满,无法创建新进程 java.lang.OutOfM ...

  6. springBoot Ribbon Hystrix Dashboard

    1.引入依赖 <!-- 引入关于 hystrix Dashboard的依赖 --> <dependency> <groupId>org.springframewor ...

  7. 使用composer出现 Cannot find module (SNMPv2-TC) 等错误的解决方法

    Cannot find module (SNMPv2-TC): At line 10 in /usr/share/snmp/mibs/UCD-DLMOD-MIB.txt Cannot find mod ...

  8. 开发API完成，写个文档

    Jira对接Prism开发API指南 部门 证系统运维团队 文档制作人 陈刚() 时间 2017-04-05 版本 第一版 目录 目的... 1 通例:... 1 认证... 2 新建版本单... 2 ...

  9. AC日记——Little Elephant and Array codeforces 221d

    221D - Little Elephant and Array 思路: 莫队: 代码: #include <cmath> #include <cstdio> #include ...

  10. Spfa【P1813】拯救小tim_NOI导刊2011提高（02）

    Description 小tim在游乐场,有一天终于逃了出来!但是不小心又被游乐场的工作人员发现了„„所以你的任务是安全地把小tim护送回家.但是,A市复杂的交通状况给你出了一大难题. A市一共有n个 ...