nicht angemeldet
Hallo,
anbei mein bisheriger Code.
<html>
<head>
<title><canvas>-Dokumentation</title>
<script type="text/javascript">
var x=20; // von links
var y=150; // von oben
var rahmendicke = 1; // Strichstärke des Sliderrahmens
var scala_x_kurz = 5; // kurze Skalastriche
var scala_x_lang = 10; // lange Skalastriche
var bezeichnung = 'Temperatur';
var bezeichnungsfontgroesse = 20;
var breite = 200;
var hoehe = 20;
var min = 0; // min. Wert
var max = 100; // max. Wert
var skala_aufloesung = 10; // wieviele Skalastriche gezeichnet werden
var wert=0;
//----------- interne Variablen ------------------------------------
var objContext;
//------------------------------------------------------------------
window.onload = function(){zeichnen();}
//----------------------------------------------------------------------------------------
function zeichnen()
{
var objCanvas = document.getElementById('canvas_id');
if (objCanvas.getContext){objContext = objCanvas.getContext('2d');
// Zeichenroutinen
}else{ /* Sonstige Routinen */ }
objContext.strokeStyle = "black";
objContext.strokeRect(x, y, breite, hoehe);
objContext.font = bezeichnungsfontgroesse + "px arial";
var laenge = objContext.measureText(bezeichnung).width;
objContext.fillText(bezeichnung, x + (breite / 2) - (laenge / 2), y + hoehe + bezeichnungsfontgroesse + 10);
skala();
}
//----------------------------------------------------------------------------------------
function skala()
{
var aufloesung = breite / max;
var i;
//Pfad beginnen
objContext.beginPath();
for (i=0; i < breite; i++)
{
if (!(i % skala_aufloesung) || i == 0)
{
objContext.moveTo(x+i,y);
objContext.lineTo(x+i,y - scala_x_lang);
// skalatext(x+i,y - scala_x_lang, i)
}
}
objContext.moveTo(x+i,y);
objContext.lineTo(x+i,y - scala_x_lang);
objContext.closePath();
objContext.stroke();
objContext.font = "10px 'optimer'";
objContext.textAlign = 'left';
objContext.rotate(-45);
objContext.fillText("12", x, y-scala_x_lang);
}
//----------------------------------------------------------------------------------------
function aktwert(messwert)
{
objContext.clearRect(x+rahmendicke, y+rahmendicke, breite - (2 * rahmendicke), hoehe - (2 * rahmendicke)); // Rechteck löschen
objContext.strokeStyle = "#fc0"; // Linienstil
objContext.fillStyle = "blue";
var aufloesung = breite / max;
objContext.fillRect(x+rahmendicke, y+rahmendicke, aufloesung * messwert, hoehe - (2 * rahmendicke)); // Gefülltes Rechteck}
}
//----------------------------------------------------------------------------------------
function increment()
{
wert=wert+1;
aktwert(wert);
}
//----------------------------------------------------------------------------------------
function decrement()
{
if (wert > 0)
{
wert=wert-1;
aktwert(wert);
}
}
//----------------------------------------------------------------------------------------
</script>
<style type="text/css">
canvas{ border: 1px solid #000;}
</style>
</head>
<body>
<canvas width="300" height="300" id="canvas_id"></canvas>
<INPUT type="button" value="increment" onclick="increment()">
<INPUT type="button" value="decrement" onclick="decrement()">
</body>
</html>
Mein Problem.... sobald ich objContext.rotate(-45); aufrufe stimmt die Position des Textes überhaupt nicht mehr.
Wenn ich // objContext.rotate(-45); kommentiert das Script laufen lasse, stimmen meine x,y Koordinaten nicht mehr. Mit "-45"
schreibt er den Text irgendwo in die Canvas. Eigentlich möchte ich den Text "90" Grad versetzen, jedoch wird dabei überhaupt kein Text mehr dargestellt, oder ich sehe den Text nicht mehr.
Warum das so ist ????
Noch eine Frage: wenn ich den Text mit einer Schleife schreibe, muss ich etwas beachten (Path oä) ??
Gruß
roger
MudGuard