Fullscreen

am Beispiel eines Videos

Javascript zum Fullscreen

var videoElement = document.getElementById("myvideo");
// click handler
// Funktion, die aufgerufen wird, sobald auf das Element geklickt wird
videoElement.onclick = function() {
    // Element bereits im Fullscreen?
    if(document.webkitFullscreenElement){
        //Fullscreen verlassen
        document.webkitExitFullscreen();
    }else{
        //Element in den Fullscreen bringen
        videoElement.webkitRequestFullscreen();   
    }
}
                       

Touch Events

Klick mich!

Canvas als "Malfeld"

<canvas id="mycanvas" width="500" height="500" style="border:1px solid #000000;">
    Canvas element not supported.
</canvas>

Javascript für Touchfunktionen

  var canvas;
  var ctx;
  var lastPoint=null;

  function init() {
    // Den "Malbereich" in einer Variable legen
    var touchzone = document.getElementById("mycanvas");
    // Die Events für's malen implementieren
    touchzone.addEventListener("touchmove", draw, false);
    touchzone.addEventListener("touchend", end, false);
    // benötigt zum malen
    ctx = touchzone.getContext("2d");
  }

  // wird ausgeführt sobald das touchmove-Event ausgelöst wird
  function draw(e) {
    e.preventDefault(); //verhindert das Standardmässige scrollen auf der gesamten Seite

    if(lastPoint!=null) { //Logik zum malen. Irrelevant für Touch Events
      ctx.beginPath();
      ctx.moveTo(lastPoint.x, lastPoint.y);
      ctx.lineTo(e.touches[0].pageX, e.touches[0].pageY);
      ctx.stroke();
    }
    lastPoint = {x:e.touches[0].pageX, y:e.touches[0].pageY}; //setzt in lastpt die x- und y-Koordinate des Fingers (hier 0 als erster Finger --> nur single touch-Unterstützung)
  }

  // wird ausgelöst sobald der Finger wieder gehoben wird (touchend-Event)
  function end(e) {
    e.preventDefault();
    // Terminate touch path
    lastPoint=null;
  }

TouchEvent

Das TouchEvent Interface definiert folgende Events

• touchstart
• touchmove
• touchend
• touchcancel

TouchEvent Attribute

interface TouchEvent : UIEvent {
    readonly    attribute TouchList touches;
    readonly    attribute TouchList targetTouches;
    readonly    attribute TouchList changedTouches;
    readonly    attribute boolean   altKey;
    readonly    attribute boolean   metaKey;
    readonly    attribute boolean   ctrlKey;
    readonly    attribute boolean   shiftKey;
    };