HTML5 Canvas implementiert Pan/Zoom/Rotate-Deom-Beispiel (mit Screenshots)_HTML5-Tutorial-Fähigkeiten

var tempContext = null; // Globale Variable 2D-Kontext
window.onload = function() {
var canvas = document.getElementById("target");
canvas.width = 450;
canvas.height = 450;
if (!canvas.getContext) {
console.log("Canvas wird nicht unterstützt. Bitte installieren Sie einen HTML5-kompatiblen Browser.");
zurück;
}
// 2D-Kontext der Leinwand abrufen und Bild zeichnen
tempContext = canvas.getContext("2d");
// renderText(canvas.width, canvas.height, tempContext);
saveAndRestoreContext(tempContext);
// drawPath(tempContext);
}
// Übersetzen bedeutet, den Startpunkt in die Mitte und zurück in die obere linke Ecke zu verschieben.
function renderText(width, height, context) {
context.translate(width / 2, height / 2 );
context.font="18px Arial";
context.fillStyle="blue";
context.fillText("Bitte drücken Sie , um das Spiel zu beenden",5,50);
context.translate(-width / 2, -height / 2);
context.fillText("Ich bin wieder ganz oben",5,50);
}
// Übersetze das Rechteck.
function drawPath(context) {
context.translate(200, 200);
context.scale(2,2); // Doppelte Größe der Originalform skalieren
context.StrokeStyle = "green";
context.beginPath();
context.moveTo(0, 40);
context.lineTo(80, 40);
context.lineTo(40, 80);
context.closePath();
context.Stroke();
}
// neuer Punkt.x = x * cos(-Winkel) - y * sin(-Winkel),
// neuer Punkt.y = y * cos(-Winkel) x * sin (-angle)
function renderRotateText(context) {
context.font="24px Arial";
context.fillStyle="red";
context.fillText("ich bin hier!!!",5,50);
// um -90 Grad drehen
// context.rotate(-Math.PI/2);
// context.fillStyle="blue";
// context.fillText("ich bin hier!!!", -400,30);
// um 90 Grad drehen
context.rotate(Math.PI/2);
context.fillStyle="blue";
context.fillText("ich bin hier!!!", 350,-420);
console.log(Math.sin(Math.PI/2));
// 90 Grad drehen und 10 Linien zeichnen
context.fillStyle="green";
for(var i=0; i<4; i ) {
var x = (i 1)*20;
var y = (i 1)*60;
var newX = y;
var newY = -x;
context.fillRect(newX, newY, 200, 6);
}
}
function saveAndRestoreContext(context) {
context.save();
context.translate(200,200);
context.rotate(Math.PI/2);
context.fillStyle="black";
context.fillText("2D-Kontext drehen und verschieben", 10, 10);
context.restore();
context.fillText("2D-Kontext drehen und verschieben", 10, 10);
}