In einer for-Anweisung kann man für die Startaktionen mehrere Anweisungen, durch Komma getrennt, notieren. In diesem Fall werden die Variablen x, y und nr auf ihre Anfangswerte gesetzt. xstart ist der Anfangswert für die x-Position und ystart der für die y-Position.
In deinem Code hast Du es etwas anders gemacht, indem Du nur eine Zählvariable i führst und die Position daraus berechnest. Das geht natürlich genau so gut.
Selbstverständlich:
var wrect = 50, hrect = 20, dist = 5,
xstart = 10, ystart = 10,
cv = $("#canvas2");
for (var x = xstart, y = ystart, nr = 0; nr < 10; nr++) {
cv.drawRect({
fillStyle: 'lightblue',
x: x, y: y, width: wrect, height: hrect,
fromCenter: false
}).drawText({
fillStyle: 'black',
x: x + wrect / 2,
y: y + hrect / 2,
text: nr
});
if ((nr + 1) % 5 == 0) {
y += dist + hrect;
x = xstart;
} else {
x += dist + wrect;
}
}Der Grund ist, dass jCanvas per Default die Koordinaten auf das Zentrum des gezeichneten Objektes bezieht, während es beim Standard-Canvas die linke obere Ecke ist. Bei jCanvas kannst Du dies durch die Eigenschaft "fromCenter" umschalten:
Verrätst Du uns auch, wie Du es gelöst hast?
Eine Lösung könnte jQuery.getScript() sein:
Das wird hier diskutiert:
https://developer.mozilla.org/en-US/docs/Web…_considerations
HTML5 specifies that a
<script>tag inserted viainnerHTMLshould not execute.
Ich möchte aber beide haben: Einmal in blue und einmal in red.
Ach so, dann habe ich dich ganz falsch verstanden: Wenn Du zwei Boxen haben willst, musst Du sie nacheinander zeichnen, z. B. mit drawRect(), und ihnen unterschiedliche Namen geben. setLayer() dient dazu, einen vorhandenen Layer nachträglich zu ändern.
Gängiges Problem: Steht das CSS in einer externen Datei gilt deren Verzeichnis als Basis für Bildpfade etc.
D. h. die URL müsste laufen:
background-image: url("../img/landing.jpg");
Ja, über setLayer(), lies in der Doku nach.
https://projects.calebevans.me/jcanvas/docs/manipulateLayers/
Die Funktion alignText() richtet den Text rechts aus:
<!doctype html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jcanvas/20.1.2/jcanvas.js"></script>
</head>
<body>
<canvas id="display1" width="220" height="220"></canvas>
<canvas id="display2" width="220" height="220"></canvas>
<input id="val" />
<button id="colorbtn">Change color</button>
<script>
function getColor2(value, opts) {
var color = opts.colorBar;
if (opts.colors) {
opts.colors.forEach(function (item, idx) {
if (value > item.threshold) color = item.colorAbove;
});
}
return color;
}
function getText(value, max, opts) {
return opts.templateText.replace("{value}", value)
.replace("{remaining}", max - value)
}
function alignText(cv) {
var maxTextWidth = cv.data("max-text-width");
var textWidth = cv.measureText('text').width;
var delta = maxTextWidth - textWidth;
var xText = cv.data("x-text");
cv.setLayer('text', {
x: xText + delta
});
}
function erstelleBalken(selector, value, max, options) {
var balkenEigenschaften = { barWidth: 400, barHeight: 40, barPos: 10,
cornerRadius: 5, colorBg: "lightgrey", colorText: "black", textPos: "right",
templateText: "{value} min" }
$.extend(balkenEigenschaften, options);
$(selector).each(function (index, element) {
var cv = $(this);
cv.data("balkenEigenschaften", balkenEigenschaften);
cv.data("max", max);
if (value > max) max = value;
var colorBar = getColor2(value, balkenEigenschaften);
var height = 2 * balkenEigenschaften.barPos + balkenEigenschaften.barHeight;
cv.drawText({
layer: true,
name: 'text',
fromCenter: false,
fillStyle: balkenEigenschaften.colorText,
strokeWidth: 4,
x: balkenEigenschaften.barPos, y: balkenEigenschaften.barPos,
fontSize: 40,
fontFamily: 'Arial',
text: balkenEigenschaften.templateText.replace("{value}", max).replace("{remaining}", max)
});
cv.data("max-text-width", cv.measureText('text').width);
yBar = balkenEigenschaften.barPos + cv.measureText('text').height / 2 - balkenEigenschaften.barHeight / 2;
if (balkenEigenschaften.textPos == "left") {
var xBar = balkenEigenschaften.barPos + cv.measureText('text').width + 5,
xText = balkenEigenschaften.barPos;
} else {
var xBar = balkenEigenschaften.barPos,
xText = balkenEigenschaften.barPos + balkenEigenschaften.barWidth + 10;
}
cv.data("x-text", xText);
var width = balkenEigenschaften.barPos + cv.measureText('text').width + 10 + balkenEigenschaften.barWidth + balkenEigenschaften.barPos;
cv.attr("width", width);
cv.attr("height", height);
cv.setLayer('text', {
text: getText(value, max, balkenEigenschaften),
x: xText,
});
cv.drawLayers();
cv.drawRect({
layer: true,
name: 'background',
fromCenter: false,
fillStyle: balkenEigenschaften.colorBg,
x: xBar, y: yBar,
cornerRadius: balkenEigenschaften.cornerRadius,
width: balkenEigenschaften.barWidth, height: balkenEigenschaften.barHeight
});
cv.drawRect({
layer: true,
name: 'bar',
fromCenter: false,
fillStyle: colorBar,
x: xBar, y: yBar,
cornerRadius: balkenEigenschaften.cornerRadius,
width: value / max * balkenEigenschaften.barWidth, height: balkenEigenschaften.barHeight
});
});
}
function sychronisiereBalken(selector) {
var maxTextWidth = 0;
$(selector).each(function (index, element) {
var cv = $(element);
var currentWidth = cv.data("max-text-width");
if (currentWidth > maxTextWidth) maxTextWidth = currentWidth;
});
$(selector).each(function (index, element) {
var cv = $(element);
var balkenEigenschaften = cv.data("balkenEigenschaften");
if (balkenEigenschaften.textPos == "left")
xText = balkenEigenschaften.barPos;
else
xText = balkenEigenschaften.barPos + maxTextWidth + balkenEigenschaften.barWidth + balkenEigenschaften.barPos;
cv.setLayer('background', {
x: maxTextWidth + balkenEigenschaften.barPos
}).setLayer('bar', {
x: maxTextWidth + balkenEigenschaften.barPos
}).setLayer('text', {
x: xText
}).drawLayers();
alignText(cv);
cv.attr("width", balkenEigenschaften.barPos + 2 * maxTextWidth + balkenEigenschaften.barWidth + balkenEigenschaften.barPos)
.drawLayers();
});
}
erstelleBalken("#display1", 50, 100, {textPos: "left"});
erstelleBalken("#display2", 5, 100, {textPos: "left"});
sychronisiereBalken("#display1, #display2");
</script>
</body>
</html>Möglicher Weise musst Du das in der Funktion, die den Balken aktualisiert, auch noch einfügen.
OK, ich werde eine Blick darauf werfen. War eine schlechte Wahl, den Weg mit Canvas statt HTML/CSS zu gehen, aber ich möchte jetzt auch nicht alles neu machen.
Also ich habe es jetzt hinbekommen so wie ich es haben möchte
Wie hast Du es denn hin bekommen, hast Du meinen Code aus Posting #79 verwenden können?
jCanvas einbinden:
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jcanvas/21.0.0/jcanvas.js"></script>Um sie nach dem Zeichnen ansprechen zu können, musst Du sie als Layer definieren und ihnen einen Namen geben:
https://projects.calebevans.me/jcanvas/docs/addLayers/
Dann kannst Du sie später auch ändern:
https://projects.calebevans.me/jcanvas/docs/manipulateLayers/
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="jcanvas.min.js"></script>Die erste Zeile reicht aus. Für die zweite Zeile musst Du jCanvas herunter laden und lokal bzw. auf deinem Webspace ablegen.
Der Grund ist lediglich, dass Du ein Problem mit den Hochkommas hast. So wird es funktionieren:
$ges= '<p class="pfehlt">Das Passwort fehlt!</p>';
muss ich dann ,siehe Bild, mehrere Canvas anlegen wenn ich z.B. unterschiedliche Schriften haben will?,
Nein, Du kannst die Farben, Schriftarten etc. während des Zeichnens umschalten. fillStyle z. B. wirkt nur auf das, was danach gezeichnet wird und verändert nicht das, was davor gezeichnet wurde. Ich möchte jetzt nicht einsteigen und Beispiele dafür geben, sondern empfehlen lieber gleich eine Bibliothek wie jCanvas zu verwenden. Dort gibt man die Eigenschaften direkt beim Zeichnen des Objektes an und kann sie später auch noch ändern. IMO ist dies wesentlich klarer.
irgendwie bekomme ich es nicht hin, dass eine Schrift vor einem farbigen Hintergrund zu lesen ist.
Ich habe es mit ctx.globalAlpha = 0.2 probiert, hat mal funktioniert, dann wieder nicht.
Was soll den transparent sein, die Schrift oder der Hintergrund? Oder das ganze Canvas? Hast Du es mit rgba() versucht?
/* So ist es falsch: */ div.klasse { background-color: black; }
Warum sollte das falsch sein?
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var ctx1 = c.getContext("2d");
var ctx2 = c.getContext("2d");
var ctx3 = c.getContext("2d");
var ctx4 = c.getContext("2d");warum hat ctx2 die farbe von ctx1. Sind das nicht zwei verschiedene Objekte oder wie man das nennt?
In Javascript ist es i. allg. so, dass mit Referenzen auf Objekte gearbeitet wird. In diesem Fall nehme ich an, dass es das Context-Objekt für ein Canvas nur einmal gibt und dass getContext jeweils nur die Referenz bzw. einen Verweis auf dieses Objekt liefert. Daher wirken die Aktionen, die man darauf anwendet, auf das selbe Objekt.