HTML5

local storage

// Speichert einen Wert zu einem Schlüssel.
window.localStorage.setItem('prename', 'Benny'); 
// Gibt den Wert zum angegebenem Schlüssel aus. Existiert kein Wert, so wird "null" zurückgegeben.
window.localStorage.getItem('prename');
// Löscht das Schlüssel-Wert-Paar.
window.localStorage.removeItem('prename');
// Löscht alle Daten aus dem "local storage", welche von der Domain angelegt wurden.
window.localStorage.clear();
// Alle Werte aus dem local storage auflisten:
function printLocalStorage(){  
  for (var i=0; i<=localStorage.length-1; i++){  
    key = localStorage.key(i);  
    value = localStorage.getItem(key);  
    document.write(key+': '+value+'<br/>');
  }  
}

Make things not clickable

pointer-events: none;

Canvas

Breite und Höhe bei einem Canvas nie über CSS angeben sondern immer direkt beim Element selbst!

Richtig:

<canvas id="rectangle" width="100" height="100">
</canvas>

Falsch:

#rectangle {
  width: 100px;
  height: 100px;
}

Definiert man die Proportionen einer Canvas über CSS, dann verhalten sich die Maßstäbe der Zeichenoperationen sehr ungewohnt. Das folgende Beispiel demonstriert den Fehler, indem anstatt der ganzen Fläche nur ein Teil der Fläche gefüllt wird:

<!DOCTYPE html>
<html>
  <head>
    <title>Canvas API - Rectangle</title>
    <meta charset="UTF-8">
    <style>
      #rectangle {
        width: 100px;
        height: 100px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="rectangle"></canvas>
    <script>
      var canvas = document.getElementById('rectangle');
      var context = canvas.getContext('2d');
      context.fillStyle = 'red';
      context.fillRect(0,0,100,100);
    </script>
  </body>
</html>

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.