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>

Kommentar abgeben

Microsoft Certified Professional Logo
 

Werbung


+Benny Neugebauer