!!! Listings zum Artikel "Weitblick"
!!! von Tobias Guenther, in iX 10/2008, S. 138
!!! Listing 1: HTML-Code
!!! Listing 2: Initialfunktion
function init(){
var image = new Image();
image.src = "alpenpanorama.jpg";
var canvas = document.getElementById('canvas');
var kontext = canvas.getContext("2d");
kontext.translate(350, 310)
kontext.drawImage(image, 0, 0);
}
!!! Listing 3: Drehen eines Objekts
function rotate_canvas(degrees){
var rad = (Math.PI/180)*degrees;
var canvas = document.getElementById('canvas');
var kontext = canvas.getContext("2d");
kontext.clearRect(0,0,700,650);
kontext.rotate(rad);
var image = new Image();
image.src = "alpenpanorama.jpg";
kontext.drawImage(image, 0, 0);
}
!!! Listing 4: Pseudo-iX-Logo (Auszug)
// Linien zeichnen: "i"
kontext.beginPath();
kontext.moveTo(175,225);
kontext.lineTo(105,325);
kontext.stroke();
// i-Punkt
kontext.arc(210, 180, 30, 0, Math.PI+(Math.PI*2)/2, true);
kontext.fillStyle = "rgb(204, 204, 255)";
kontext.fill();
// "X" zeichnen
kontext.beginPath();
kontext.moveTo(235,225);
kontext.lineTo(135,365);
kontext.lineTo(235,225);
kontext.fillStyle = "rgb(102, 102, 153)";
kontext.fill();