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>

 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com