kramann.info
© Guido Kramann

Start mit der Entwicklung eines Stop-Motion-Programms

(EN google-translate)

(PL google-translate)

In nachfolgendem Beispiel wird aufgezeigt, wie bestimmte Funktionalitäten bewerkstelligt werden können:

Speichern der Szenen
Ergänzen einer Szene
Durchsicht der Filmbilder
Repräsentation einer Szene

<!DOCTYPE html>
<html>
    <head lang="de">
        <meta charset="iso-8859-1">
         <script language:javascript>
             var malkontext = null;

             var film = new Array();
             var index = 0;

             function next()
             {
                 index++;
             }
             function back()
             {
                 if(index>0)
                     index--;
             }

             function init()
             {
                 malkontext = document.getElementById("grafik").getContext("2d"); 
                 document.getElementById("grafik").addEventListener("mousedown",verarbeiteMausklick,false);
                 setInterval(zeichnen,10);
             }

             function verarbeiteMausklick(event)
             {
                var x = event.offsetX;
                var y = event.offsetY;             

                if(film[index]==undefined)
                    film[index] = new Array();

                film[index][film[index].length] = new Array(x,y);
              }

              function zeichnen()
              {
                      malkontext.fillStyle = "#ccc";
                      malkontext.fillRect(0,0,640,480);
                 if(film[index]!=undefined)
                 {
                  for(var i=0;i<film[index].length;i++)
                  {
                      var x = film[index][i][0];
                      var y = film[index][i][1];
                      malkontext.fillStyle = "#f00";
                      malkontext.fillRect(x,y,40,40);
                  }
                 }
              }
         </script>
    </head>
    <body onload="javascript:init()">
        <canvas id="grafik" width="640" height="480"></canvas><br/>
        <input style="width:200px" type="button" id="back" value="<-" onclick="javascript:back()"/>
        <input style="width:240px" type="button" id="play" value="PLAY" onclick="javascript:play()"/>
        <input style="width:200px" type="button" id="next" value="->" onclick="javascript:next()"/>
    </body>
</html>

Code 0-1: Quelltext zu "Stop Motion Version 0.001"