代码：

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

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 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+360/angleCount));
        this.by=radius*Math.sin(getRad(theta+360/angleCount));

        var ra=Math.PI/angleCount;
        var x=Math.sqrt(outerRad*outerRad-radius*radius*Math.sin(ra)*Math.sin(ra))-radius*Math.cos(ra);
        var alpha=Math.asin(x*Math.sin(ra)/this.outerRad);
        this.angleD=getRad(theta+360/angleCount)+alpha;
        this.dx=outerRad*Math.cos(this.angleD);
        this.dy=outerRad*Math.sin(this.angleD);

        this.angleC=this.angleD+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){
        ctx.strokeStyle = "black";

        for(var i=0;i<angleCount;i++){
            ctx.save();
            ctx.fillStyle = getColor(i+5);
            ctx.rotate(2*Math.PI/angleCount*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 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";
    }
}

//-->
</script>

【canvas】四角光阑的更多相关文章

  1. 【Canvas】动态正17边光阑 向高斯致敬

    [背景知识] 公元前三世纪,欧几里得在<几何原本>中记载了正方形,正五边形,正六边形的做法,后来人们也掌握了正十五边形作图,但之后两千多年,人们没有在更高阶边形上取得突破. 1796年,1 ...

  2. 【canvas】N角光阑

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

  3. 【canvas】三角光阑

    代码: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type ...

  4. HTML5 Canvas 六角光阑动态效果

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

  5. html5 canvas标签

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. [canvas]空战游戏1.18

    空战游戏到今天可以玩了,玩法还是方向键(或AWSD)控制飞机位置,空格键开炮,吃五星升级,被敌机打中降级直到击落,与敌机相撞则GG. 点此下载程序1.16版,用CHrome打开index.html试玩 ...

  7. [Canvas]空战游戏 已经可以玩了 1.13Playable

    空战游戏做到这里,己方运动,己方发射子弹,敌方运动,敌方发射子弹,子弹与飞机碰撞,飞机与飞机碰撞都已经具备了,换言之已经可以玩了. 还需要一个奖励升级系统,在上面显示击落敌机数量等,还有己方不幸被击落 ...

  8. [Canvas]空战游戏进阶 增加己方子弹管理类

    点此下载源码,可用Chrome打开观看. 图例: 代码: <!DOCTYPE html> <html lang="utf-8"> <meta http ...

  9. html5 canvas常用api总结(三)--图像变换API

    canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...

随机推荐

  1. Docker入门到实战

    1.系统要求 Docker CE 支持 64 位版本 CentOS 7,并且要求内核版本不低于 3.10. CentOS 7满足最低内核的要求,但由于内核版本比较低,部分功能(如 overlay2 存 ...

  2. BZOJ 4276: [ONTAK2015]Bajtman i Okrągły Robin

    最大权值匹配,贪心匈牙利即可. 检查一些人是否能被全部抓住可以采用左端点排序,右端点优先队列处理. By:大奕哥 #include<bits/stdc++.h> using namespa ...

  3. SEL和IMP

    http://www.jianshu.com/p/4a09d5ebdc2c SEL : 类成员方法的指针,但不同于C语言中的函数指针,函数指针直接保存了方法的地址,但SEL只是方法编号. IMP:一个 ...

  4. [QSCOJ39]喵哈哈村的代码传说 第五章 找规律

    题目大意: 给你n堆排,两人轮流对其中一堆牌进行以下操作之一: 1.从这堆牌中取出任意数量的牌: 2.将这这堆牌分为任意大小的3堆牌. 不能操作者负. 问先手是否有必胜策略. 思路: 尝试构造sg函数 ...

  5. django深入-ORM操作

    1 ORM添加 1.1 一对多添加 方式一: pub_obj=Publish.objects.get(id=2) Book.objects.create(title="python" ...

  6. 某DP题目1

    题意: 有n个由左右括号组成的字符串,选择其中若干字符串,使得组成的括号序列合法且长度最长.n <= 1000,n个字符串的长度和 <= 10000. 分析: 其实我一开始做这一题的时候, ...

  7. MySQL之char、varchar和text的设计

    最近有表结构设计中出现了varchar(10000)的设计引起了大家的讨论,我们下面就来分析分析. 首先我们先普及一下常识: 1.char(n)和varchar(n)中括号中n代表字符的个数,并不代表 ...

  8. 使用 VS2012 开发 IDA GUI 插件 WIN32 SDK 和 内置函数 AskUsingForm_c

    1. 执行菜单的File->New->Project… (Ctrl-Shift-N)打开新建工程窗口. 2. 展开左侧的Visual C++项目模板分支,然后选择右侧的Win32 Proj ...

  9. Java自定义Exception

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  10. 【资料】wod食物

    注意:1. 除非另外注明, 所有效果持续时间为整个地城2. 某几样食物若使用午饭时间技能, 效果只有LV1 (lunch level -25), 请小心服用. X技能等级 = 技能等级 焖豆属性奖励体 ...