【canvas】四角光阑
代码:
<!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】四角光阑的更多相关文章
- 【Canvas】动态正17边光阑 向高斯致敬
[背景知识] 公元前三世纪,欧几里得在<几何原本>中记载了正方形,正五边形,正六边形的做法,后来人们也掌握了正十五边形作图,但之后两千多年,人们没有在更高阶边形上取得突破. 1796年,1 ...
- 【canvas】N角光阑
这回把光阑代码统一了,修改angleCount的数目为3就是三角光阑,angleCount的数目为4就是四角光阑,angleCount的数目为6就是六角光阑,目前代码中是12角光阑. 图示: 代码: ...
- 【canvas】三角光阑
代码: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type ...
- HTML5 Canvas 六角光阑动态效果
光阑是光具组件中光学元件的边缘.框架或特别设置的带孔屏障,本人实现了结构比较简单的六角光阑,效果有点像宇航员在徐徐张开的飞船舷窗中看到逐渐完整的地球,下面四张图可以感受一下. 当然看动态效果才能真正体 ...
- html5 canvas标签
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- [canvas]空战游戏1.18
空战游戏到今天可以玩了,玩法还是方向键(或AWSD)控制飞机位置,空格键开炮,吃五星升级,被敌机打中降级直到击落,与敌机相撞则GG. 点此下载程序1.16版,用CHrome打开index.html试玩 ...
- [Canvas]空战游戏 已经可以玩了 1.13Playable
空战游戏做到这里,己方运动,己方发射子弹,敌方运动,敌方发射子弹,子弹与飞机碰撞,飞机与飞机碰撞都已经具备了,换言之已经可以玩了. 还需要一个奖励升级系统,在上面显示击落敌机数量等,还有己方不幸被击落 ...
- [Canvas]空战游戏进阶 增加己方子弹管理类
点此下载源码,可用Chrome打开观看. 图例: 代码: <!DOCTYPE html> <html lang="utf-8"> <meta http ...
- html5 canvas常用api总结(三)--图像变换API
canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...
随机推荐
- mac linux 命令笔记 - 权限管理
壹 权限 在使用命令行工具时,可能需要临时切换到管理员/root权限,如何切换呢? 正文 进入 root 权限: sudo -i 提示输入密码,这个密码就是锁屏的解锁密码. 在操作完成之后,使用 ex ...
- 【LeetCode】32. Longest Valid Parentheses
Given a string containing just the characters '(' and ')', find the length of the longest valid (wel ...
- POJ 3162 Walking Race 树形dp 优先队列
http://poj.org/problem?id=3162 题意 : 一棵n个节点的树.wc爱跑步,跑n天,第i天从第i个节点开始跑步,每次跑到距第i个节点最远的那个节点(产生了n个距离),现在要 ...
- 【二分答案】【DFS】【分类讨论】Gym - 100851F - Froggy Ford
题意:河里有n块石头,一只青蛙要从左岸跳到右岸,你可以再在任意一个位置放一块石头,使得在最优方案下,青蛙单步跳的距离的最大值最小化,输出该位置. 将原图视作完全图,二分答案mid,然后在图中只保留小于 ...
- 51nod1675 序列变换
link 题意: 给定长为n的序列a,b,下标从1开始,问有多少对x,y满足gcd(x,y)=1且$a_{b_x}=b_{a_y}$? $n\leq 10^5.$ 题解: $a_{b_x}$和$b_{ ...
- URAL 1993 This cheeseburger you don't need 模拟题
This cheeseburger you don't need 题目连接: http://acm.timus.ru/problem.aspx?space=1&num=1993 Descrip ...
- Linux知识(1)----U盘安装Ubantu14.04系统
由于需要用到ROS(Robot Operating System)机器人操作系统,该系统是基于Linux系统Ubantu14.04的,第一次安装接触Linux点点生惧,但我知道并没那么难弄,况且还是U ...
- MySQL同步状态双Yes的假象及seconds_behind_master的含义
近期由于特殊原因有一台主库宕机了一个小时没有处理,说起来这是个挺不好啥意思的事情,但是由于这个事情反而发现个比较诡异的情况,那就是在主库宕机一个小时候后,监控才发出从库IO thread中断的报警,也 ...
- activemq 消息传送测试
activemq 5.10.0,topic messagelength字符 20000011 发送时间 接收时间 传送时间 毫秒 1 1443067284128 1443067288325 ...
- BZOJ 1032 JSOI 2007 祖码Zuma 区间DP
题目大意:依照祖玛的玩法(任意选颜色),给出一段区间.问最少用多少个球可以把全部颜色块都消除. 思路:把输入数据依照连续的块处理.保存成颜色和数量.然后用这个来DP.我们知道,一个单独的块须要两个同样 ...