zoukankan      html  css  js  c++  java
  • HTML5 Canvas 六角光阑动态效果

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

    当然看动态效果才能真正体验,要看完整的演示请下载: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>
  • 相关阅读:
    IDA Supported Processors
    Hex-Rays Decompiler
    USB ISP(ICSP) Open Programmer < PWM ADC HV PID >
    A SCSI command code -- SIMPLIFIED DIRECT-ACCESS DEVICE (RBC)
    How to match between physical usb device and its drive letter?
    记录一下公司数据库升级的步骤
    Windows2003 SQL2005解决系统Administrator密码不知道的问题
    在SSMS里批量删除表、存储过程等各种对象
    用SQLSERVER里的bcp命令或者bulkinsert命令也可以把dat文件导入数据表
    分享一张SQLSERVER执行流程的图片
  • 原文地址:https://www.cnblogs.com/heyang78/p/7492471.html
Copyright © 2011-2022 走看看