【Canvas】鋸鋸齒左右開門效果
阿新 • • 發佈：2022-01-09
原始碼下載：https://files.cnblogs.com/files/heyang78/imma220107.rar
如果不知道鋸鋸齒左右開門效果為何物，請看下面三張效果圖：
1.
2.
3.
程式碼：
<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
<title>鋸鋸齒開門效果</title>
<style type="text/css">
.centerlize{
margin:0 auto;
border:0px solid red;
width:960px;height:540px;
}
</style>
</head>
<body onload="draw();">
<div class="centerlize">
<canvas id="myCanvas" width="960px" height="540px" style="border:1px dashed black;">
出現文字表示你的瀏覽器不支援HTML5
</canvas>
</div>
</body>
</html>
<script type="text/javascript">
<!--
// 畫布寬度
const WIDTH=960;
// 畫布高度
const HEIGHT=540;
// 左右活動版之間的間隔
var gap=0;
//-------------------------------
// 開始繪製
//-------------------------------
function draw(){
var canvas=document.getElementById('myCanvas');
canvas.width=WIDTH;
canvas.height=HEIGHT;
context=canvas.getContext('2d');
context.translate(WIDTH/2,HEIGHT/2);
slot=new Slot();
animate();
};
//-------------------------------
// 有條件執行動畫
//-------------------------------
function animate(){
slot.update(gap);
slot.paintBg(context);
slot.paint(context);
gap+=1;
// 241=Max(obj.boards)*2+1
if(gap<WIDTH+241){
window.requestAnimationFrame(animate);
}
}
//-------------------------------
// 光闌物件
//-------------------------------
function Slot(){
var obj=new Object;
obj.gap=0;
obj.img=new Image();
obj.img.src="imma.png";
obj.boards=[120,80,40,0,-40,-80,-120,-80,-40,0,40,80,120];
// 計算
obj.update=function(gap){
this.gap=gap;
};
// 畫背景圖片
obj.paintBg=function(ctx){
context.drawImage(this.img,0,0,WIDTH,HEIGHT,-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);
};
// 畫左右展開活動板
obj.paint=function(ctx){
var n=this.boards.length;
var boardWidth=HEIGHT/n;
for(var i=0;i<n;i++){
var board=this.boards[i];
var x1=0+(-WIDTH/2);
var y1=i*boardWidth+(-HEIGHT/2);
var w1=WIDTH/2+board-this.gap/2;
var h1=boardWidth;
ctx.fillStyle=getColor(i);
ctx.fillRect(x1,y1,w1,h1);
var x2=board+this.gap/2;
var y2=i*boardWidth+(-HEIGHT/2);
var w2=(WIDTH)-board-this.gap/2;
var h2=boardWidth;
ctx.fillStyle=getColor(i);
ctx.fillRect(x2,y2,w2,h2);
}
};
return obj;
}
//-------------------------------
// 角度得到弧度
//-------------------------------
function getRad(degree){
return degree/180*Math.PI;
}
//-------------------------------
// 得到顏色
//-------------------------------
function getColor(index){
var arr=["green","skyblue","purple","#aa0000",
"orange","yellow","maroon","navy",
"red","blue","lime","teal","fuchsia",
"aqua","black"];
if(index>arr.length){
index=index % arr.length;
}
return arr[index];
}
//-->
</script>以上程式碼難度不大，主要利用陣列造成鋸齒效果，然後計算好每個矩形的起點和高寬就好。懂得都懂，就不贅述了。
END