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>
HTML5 Canvas 六角光阑动态效果的更多相关文章
- HTML5 Canvas 八星聚义动态效果
昔有石碣村七星聚义,今有Canvas八星聚义.动态效果是,八颗星以等速螺线慢慢向中心聚集,最后汇聚成一颗. 效果: 代码: <!DOCTYPE html> <html lang=&q ...
- 【canvas】N角光阑
这回把光阑代码统一了,修改angleCount的数目为3就是三角光阑,angleCount的数目为4就是四角光阑,angleCount的数目为6就是六角光阑,目前代码中是12角光阑. 图示: 代码: ...
- HTML5 Canvas 绘制六叶草
注意: context.arc(横坐标,纵坐标,弧半径,起始角度,终止角度,逆顺时针);这个函数挺难用,主要原因是最后参数和角度的关系.不管文档怎么说,按我的实际经验,逆顺时针=false时,是逆时针 ...
- HTML5 Canvas arc()函数//////////////////////(转)
HTML5 Canvas arc()函数 实例 创建一个圆形: var c=document.getElementById("myCanvas"); var ctx=c.get ...
- HTML5 Canvas arc()函数
实例 创建一个圆形: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d") ...
- HTML5 canvas绘制线条曲线
HTML5 canvas入门 线条例子 1.简单线条 2.三角形 3.填充三角形背景颜色 4.线条颜色以及线条大小 5.二次贝塞尔曲线 6.三次贝塞尔曲线 <!doctype html> ...
- 纯JavaScript实现HTML5 Canvas六种特效滤镜
纯JavaScript实现HTML5 Canvas六种特效滤镜 小试牛刀,实现了六款简单常见HTML5 Canvas特效滤镜,并且封装成一个纯 JavaScript可调用的API文件gloomyfi ...
- [js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)
上文,写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具),本文主要是关于线条的样式设置 lineWidth: 设置线条的宽 ...
- [js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)
接着上文[js高手之路] html5 canvas系列教程 - 状态详解(save与restore),相信大家都应该玩过美颜功能,而我们今天要讲的就是canvas强大的像素处理能力,通过像素处理,实现 ...
随机推荐
- javascript中在定义函数的几种形式
内容主要是讲述javascript在类(原型对象)中定义方法的几种形式,简要之主要有三种:this关键字.prototype关键字.var 对象名={name:value,name2:value2}: ...
- Postfix+Sasl+Courier-authlib+Dovecot+MySQL+extmail 邮件系统部署
# yum remove postfix ##删除系统自带postfix# userdel postfix# groupdel postdrop# groupadd -g 2525 postfix# ...
- CodeForces Round #403 (Div.2) A-F
精神不佳,选择了在场外同步划水 没想到实际做起来手感还好,早知道就报名了…… 该打 未完待续233 A. Andryusha and Socks 模拟,模拟大法好.注意每次是先判断完能不能收进柜子,再 ...
- 【linux高级程序设计】（第十四章）TCP高级应用
文件I/O方式比较 1.阻塞式文件I/O 进程从调用函数开始,直到返回这段时间都处于阻塞状态. 2.非阻塞式文件I/O 如果当前没有数据可操作,将不阻塞当前进程,而是立即返回一个错误信息.需要反复尝试 ...
- 计蒜客 18487.Divisions-大数的所有因子个数-Miller_Rabin+Pollard_rho-超快的(大数质因解+因子个数求解公式) (German Collegiate Programming Contest 2015 ACM-ICPC Asia Training League 暑假第一阶段第三场 F)
这一场两个和大数有关的题目,都用到了米勒拉宾算法,有点东西,备忘一下. 题目传送门 F. Divisions 传送门 这个题是求一个数的所有因子个数,但是数据比较大,1e18,所以是大数的题目,正常的 ...
- 计蒜客 18488.Extreme Sort (German Collegiate Programming Contest 2015 ACM-ICPC Asia Training League 暑假第一阶段第三场 E)
E.Extreme Sort 传送门 代码: #include<iostream> #include<cstdio> #include<cstring> #incl ...
- 51nod 1095 Anigram单词【hash/map/排序/字典树】
1095 Anigram单词 基准时间限制:1 秒 空间限制:131072 KB 分值: 10 难度:2级算法题 收藏 关注 一个单词a如果通过交换单词中字母的顺序可以得到另外的单词b,那么定义b ...
- Educational Codeforces Round 33 (Rated for Div. 2) C. Rumor【并查集+贪心/维护集合最小值】
C. Rumor time limit per test 2 seconds memory limit per test 256 megabytes input standard input outp ...
- Python与数据库[1] -> 数据库接口/DB-API[0] -> 通用标准
数据库接口 / DB-API 在Python中,数据库是通过适配器(Adaptor)来连接访问数据库的,适配器通常与数据库客户端接口(通常为C语言编写)想连接,而不同的适配器都会尽量满足相同的DB-A ...
- 腾讯消消乐 （状态压缩DP）
腾讯消消乐 题意 给出长度为 n 的序列,每次可以选择删除序列的一个连续区间,要求这一段区间内所有数最大公约数不小于 k ,删除后剩下的序列仍然构成连续序列. 定义 f(i) 为进行 i 次操作将整个 ...