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

当然看动态效果才能真正体验，要看完整的演示请下载：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. shell面试经典70例

    转载自:http://www.imooc.com/article/1131 1) 如何向脚本传递参数 ? ./script argument 例子: 显示文件名称脚本 ./show.sh file1. ...

  2. 编译gdb 报错 No module named gdb.frames

    将源码目录下的python模块拷贝到指定目录即可 cd /root/gdb-7.12/ cp -rp gdb/python/lib/gdb /usr/local/share/gdb/python/ 编 ...

  3. screenshoter 連續截圖工具

    https://pcrookie.com/?p=993 顯示 mouse 設定 Settings -> Saving -> Display mouse cursor

  4. 非MFC工程中使用MFC库

    目录(?)[-] 需求说明 常见问题 问题分析 参考解决方法 我的解决方案 Stdafxh的原理   需求说明 C++工程的类型有很多,从VS(或VC)可以看到常见的有:Win32 Console A ...

  5. Kubernetes监控工具

    #镜像在谷歌上需要FQ#####################################监控工具#当前最新版本 heapster https://github.com/kubernetes/h ...

  6. 网站开发只需数小时？Meteor 说这才是未来

    原文: http://www.geekpark.net/topics/211573/ 那个想要挑战过去数十年沿用至今的网站开发模式的新势力来了. Meteor 是从 YC 孵化而出的现代网站开发平台, ...

  7. PHP面向对象知识点总结

    1.$this是什么 当前类实例化的对象 2.访问对象中的成员 对象->成员 3.构造方法 通常用来初始化对象的属性,不用把属性写死,不同的对象就有了不同的属性 4.get.set的用法 通常将 ...

  8. JAVA泛型练手

    公司电脑不能安装JAVA环境,不爽啊. import java.util.List; import java.util.ArrayList; import java.lang.reflect.Meth ...

  9. 在libGDX中使用Spine骨骼动画

    首先,github是个宝库,实践流的读者可以直接看例子进行学习 1.这是Spine官方给出的例子 https://github.com/EsotericSoftware/spine-superspin ...

  10. JDK7集合框架源码阅读（五） Hashtable

    基于版本jdk1.7.0_80 java.util.Hashtable 代码如下 /* * Copyright (c) 1994, 2011, Oracle and/or its affiliates ...