zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden HTML5 Canvas

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.12.2012, 00:30
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.12.2012
Beiträge: 1
Zombiejesus befindet sich auf einem aufstrebenden Ast
Beitrag HTML5 Canvas

ich versuche den ganzen Tag schon ein Bild mittels html5 canvas über mein context Feld laufen zu lassen. (Soll sich dann steigern zu panorama).

Ich finde meinen Fehler einfach nicht ich hab mich durch 2 Tuturials durchgekämpft und versuche jetzt das gelernte mit einer Übung zu festigen. Jedoch finde ich meine/n Fehler nicht. Könnt ihr mir weiter helfen?

Code:
<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="400"></canvas>
    <script>
	window.requestAnimFrame = (function(callback) {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
        function(callback) {
          window.setTimeout(callback, 1000 / 60);
        };
		function drawImage(myImage, context){
        context.drawImage(imageObj, myImage.x, myImage.y);
		}
		function animate(myImage, canvas, context, startTime) {
        // update
        var time = (new Date()).getTime() - startTime;

        var linearSpeed = 100;
        // pixels / second
        var newX = linearSpeed * time / 1000;

        if(newX < myImage.x) {
          myImage.x = newX;
        }

        // clear
        context.clearRect(0, 0, canvas.width, canvas.height);

        drawImage(myImage, context);

        // request new frame
        requestAnimFrame(function() {
          animate(myImage, canvas, context, startTime);
        });
      }
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      var myImage = {
        x: 0,
        y: 75,
        width: 100,
        height: 50,
      };

      drawImage(myImage, context);

      // wait one second before starting animation
      setTimeout(function() {
        var startTime = (new Date()).getTime();
        animate(myImage, canvas, context, startTime);
      }, 1000);
    </script>
  </body>
</html>
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
canvas, html 5, html 5 canvas, html5

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
HTML5 Enthusiast (m/w) ictjob.de Jobs 0 28.08.2012 17:45
HTML5 Frage Html5 (X)HTML 11 14.04.2012 12:03
HTML5 XML-Konform notieren pixel24 (X)HTML 9 13.04.2012 18:04
Veranstaltungstipp - MMT 28 "Webtechnologien - HTML5, CSS3 & Co" - Köln MediaPark hemfrie Offtopic 2 20.10.2011 11:00
3D Objekte in HTML5 Chemika (X)HTML 2 28.06.2011 13:59


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:45 Uhr.