【Canvas】锯锯齿左右开门效果

源码下载：https://files.cnblogs.com/files/heyang78/imma220107.rar

如果不知道锯锯齿左右开门效果为何物，请看下面三张效果图：

代码：

<!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