Doors

Hva

Her setter vi opp en enkel animasjon av dører som åpnes og lukkes foran en enkel canvas med et bilde. Klikk på døra og bildet.

Vi legger demoen i en iFrame for å forenkle koden. Hvis du vil kan du se den i et eget vindu, og inspisere kildekoden:
doors1 https://borres.hiof.no/wep/js/ex/doors/doors1/doors1.html

Klikk på dørene !

Koden som handterer dørene er slik:

// measuring doors
var leftD=null;
var rightD=null;
var doorW=null;
var doorDelta=null;
var rightDoorLeft=null;
// parameters for dooranimation
var steps=20;
var stepix=0;
// global flags 
var doorsAreOpen=false;
var doorsAreClosed=true;
function initDoors()
{
    leftD=document.getElementById("leftdoor");
    rightD=document.getElementById("rightdoor");
    doorW=parseInt(rightD.style.width);
    doorDelta=Math.round(doorW/steps);
    rightDoorLeft=rightD.style.left;
    doorsAreClosed=true;
}
function startAnimation(){
    if(doorsAreClosed)
        openDoor();
    else
        closeDoor();
}

function openDoor()
{
    if(!doorsAreClosed)
        return;
    leftD.style.width=""+(doorW-(stepix*doorDelta))+"px";
    rightD.style.width=""+(doorW-(stepix*doorDelta))+"px";
    rightD.style.left=parseInt(rightD.style.left)+doorDelta+"px";
    
    doorsAreOpen=false;
    
    stepix=stepix+1;
    if(stepix < steps)
        setTimeout(openDoor,100);
    else
    {
        doorsAreOpen=true;
        doorsAreClosed=false;
    }
}
function closeDoor()
{
    leftD.style.width=""+(doorW-(stepix*doorDelta))+"px";
    rightD.style.width=""+(doorW-(stepix*doorDelta))+"px";
    rightD.style.left=parseInt(rightD.style.left)-doorDelta+"px";
    stepix=stepix-1;
    if(stepix > 0)
        setTimeout(closeDoor,20);
    else
    {
        leftD.style.width=doorW+"px";
        rightD.style.width=doorW+"px";
        rightD.style.left=rightDoorLeft;
        doorsAreClosed=true;
    }
}

Koden som tegner i canvas:

function drawFace(cid)
{
    var canvas = document.getElementById(cid);
    if (canvas.getContext){
         var dc = canvas.getContext('2d');
         var img = new Image();   
         img.onload = function(){  
               dc.drawImage(img, 50, 50, 80, 80) ;
         }  
         img.src ='../bs8.png'; 
    } 
    else 
        alert('cannot do canvas');
}

HTML koden:

<!DOCTYPE HTML>
<title>What</title>
<head>
    <meta charset="UTF-8"/>    
    <script src="doors1.js" type="text/javascript"> </script>
    <script src="../makeCanvas.js" type="text/javascript"> </script>
</head>
<body style="background-color:#FFFFC0"> 
    <div id="doors" onclick="startAnimation();">
        <!-- doorleft -->
        <img id="leftdoor" src="../leftdoor.gif" style="width:100px;height:340px;
                     position:absolute; left:100px;top:20px; z-index:20;"/>
        <!-- doorright -->
        <img id="rightdoor" src="../rightdoor.gif"  style="width:107px;height:340px;
                     position:absolute; left:200px;top:20px; z-index:20;"/>
    </div>  
    <!-- the canvas   -->
    <div onclick="startAnimation();" 
         style="position:absolute;left:100px;top:110px;z-index:10">        
        <canvas id="glcanvas" width="200" height="240" 
                style="border-style:solid;border-width:1px" >              
        </canvas>
    </div>
    <!-- set up -->
    <script>
        initDoors();
        drawFace("glcanvas");
    </script>
    </body>    
</html>