UHU-Startseite►Informatik►Techniken►java-script►canvas-Element►
Images


Bilderformate, wie kommt man an die Bilddaten ran
Bilddaten müssen dem Canvas-Element als Quelle bekannt sein und können nicht von anderen Internetseite querverlinkt werden.
Als Quellen eignen sich besonders solche, die schon in der HTML-Seite gespeichert sind, es ist aber auch möglich Bilddaten im javascript-Quelltext zu speichern.
(Zugriff: "document.images", "document.getElementsByTagName" document.getElementById"=

Man kann aber auch ein weiteres Canvas-Element als Quelle verwenden. (Zugriff: "document.getElementsByTagName" oder "document.getElementById")

Oder eben direkt im Quelltext: 

var img_src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';



Beispiel 1 

var img = new Image();
  img.onload = function(){
    ctx.drawImage(img,0,0);
    ctx.beginPath();
    ctx.moveTo(30,96);
    ctx.lineTo(70,66);
    ctx.lineTo(103,76);
    ctx.lineTo(170,15);
    ctx.stroke();
  };
  img.src = 'images/backdrop.png';
}
Hier wird der Rest erst gezeichnet, wenn das Bild schon geladen wurde. Daher befindet es sich am Schluss im Hintergrund.



Hintergrundbild: Skalierung
optimal sichtbar mit Firefox Formeln mit asciimath Druckversion