Mit setLlayer und name kann ich - glaube ich - ein Rechteck ändern ohne wie bei canvas ein clearRect aufzurufen
$('canvas').setLayer('myBox', { fillStyle: '#36b', rotate: 30, x: '+=100', y: '-=100'
})
.drawLayers();
Ist das ok?
wie ändere ich jetzt aber einen Text den ich mit drawText erstellt habe?
LG
Jochen Soory noch eine Frage dazu:
warum ist das Ergebnis nur nr, dh zB. nur "3" wenn da zweimal text verwandt wird?
Danke Dir.
Frage:
.getLayer('text' + nr).text;
was macht dieser Ausdruck genau?
Da ist die Dokumentation etwas dürftig.
Was bedeuted das .text
??
LG
Jochen
Hallo. wieder da
ich habe von dir den Code für das Erzeugen von 10 Elementen beschriftet mit den Ziffern 0 bis 9
var wrect = 50, hrect = 50, dist = 5,
xstart = 50, ystart = 200,
cv = $("canvas");
for (var x = xstart, y = ystart, nr = 0; nr < 10; nr++) {
var num=nr;
cv.drawRect({
layer:true,
fillStyle: 'lightblue',
x: x, y: y, width: wrect, height: hrect,
fromCenter: false,
click: function(layer) {
// Minus
$(this).animateLayer(layer, {
fillStyle: 'blue'
});
}
}).drawText({
layer: true,
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;
}
}
Ergänzst habe ich ihn um ein Click Ereignis. Wenn ein Element angeklickt wird soll es die Farbe wechseln
Jetzt möchte ich aber zusätzlich die angezeigte Ziffer des angelickten Elements erhalten . Mit dem nr kann ich nicht arbeiten, Hier erhalte ich immer den letzten Index.
Wahrscheinlich muss ich dafür eine Funktion in die Funktion einfügen. Aber wie es so richtig funktioniert ist mir nicht klar.
Danke Meister,
dann bekomme ich jetzt über val die geänderte Zahl und über nr das entsprechende Element von den Dreien.
Ich hatte es auch mit dem click probiert, aber irgendwie klappte es nicht.
ich erzeuge mit mit jcanvas folgendes Bild
html-seminar.de/woltlab/attachment/1465/
Der Code dazu:
for (var i=0; i<3; i+=1) {
$('canvas').addLayer({
type: 'rectangle',
strokeStyle: 'black',
strokeWidth: 1,
fillStyle: '#B5EC9B',
x: 140+i*80,
y:330,
width: 30,
height: 30,
fromCenter: false
})
.drawLayers();
$('canvas').drawText({
layer: true,
fillStyle: 'black',
x: 150 +i*80,
y: 330,
fontSize: 20,
fontFamily: 'Verdana, sans-serif',
text: '7',
fromCenter: false
});
$('canvas').drawRect({
layer: true,
strokeStyle: 'black',
strokeWidth: 1,
fillStyle: '#B5EC9B',
x: 170+i*80, y: 330,
width: 30,
height: 15,
fromCenter: false,
click: function(layer) {
// Plus
$(this).animateLayer(layer, {
fillStyle: 'red',
});
}
});
$('canvas').drawRect({
layer: true,
strokeStyle: 'black',
strokeWidth: 1,
fillStyle: '#B5EC9B',
x: 170+i*80, y: 345,
width: 30,
height: 15,
fromCenter: false,
click: function(layer) {
// Minus
$(this).animateLayer(layer, {
fillStyle: 'blue'
});
}
});
Wenn jetzt zum Beipiel in der ersten Gruppe auf " + " geklickt wird,
soll die in der ersten (nur) Gruppe die 7 auf 8 erhöht werden.
Gleichzeitig soll die variable "8" außerhalb der Funktion für eine weitere Verarbeitung zur Verfügung stehen.
Ich habe in Anlehnung an die JCanvas Dokumentation versucht das über eine Funktion zu ermöglichen., Klappt aber nicht.
Guten Morgen
Wenn ich Rechtecke und Texte mit Canvas erstellt habe und füge dann danach Rechtecke als Layer - mit JCanvas erstellt - hinzu, dann
verschwinden die Canvas -Rechtecke/Texte..
Erzeuge ich die jCanvas- Elemente vor den Canvas- Elementen, dann kommen zwar die Canvas Elemente, es finden aber Verschiebungen bei den Texten z.B. statt.
Kann ich nicht mit Canvas und JCanvas gleichzeitig arbeiten?
LG
Jochen
Danke, funktioniert
Klappt wunderbar bis auf den Text
$('canvas').addLayer({
type: 'rectangle',
strokeStyle: 'black',
strokeWidth: 1,
fillStyle: '#B5EC9B',
x: 140+i*80,
y:330,
width: 30,
height: 30,
fromCenter: false
})
.drawLayers();
$('canvas').drawText({
fillStyle: 'black',
x: 150 +i*80,
y: 330,
fontSize: 20,
fontFamily: 'Verdana, sans-serif',
text: '7',
fromCenter: false
});
$('canvas').drawRect({
layer: true,
strokeStyle: 'black',
strokeWidth: 1,
fillStyle: '#B5EC9B',
x: 170+i*80, y: 330,
width: 30,
height: 15,
fromCenter: false,
click: function(layer) {
// Plus
$(this).animateLayer(layer, {
fillStyle: 'red'
});
}
});
$('canvas').drawRect({
layer: true,
strokeStyle: 'black',
strokeWidth: 1,
fillStyle: '#B5EC9B',
x: 170+i*80, y: 345,
width: 30,
height: 15,
fromCenter: false,
click: function(layer) {
// Minus
$(this).animateLayer(layer, {
fillStyle: 'red'
});
}
});
Der Text ( die 7 ) erscheint nur im dritten Feld
schon erste Problem.
Warum wird der Text nicht ins Rechteck geschrieben
for (var i=0; i<3; i+=1) {
$('canvas').addLayer({
type: 'rectangle',
fillStyle: '#B5EC9B',
x: 140+i*80,
y:330,
width: 30,
height: 30,
fromCenter: false
})
.drawLayers();
$('canvas').drawText({
fillStyle: 'black',
x: 150 +i*80,
y: 330,
fontSize: 20,
fontFamily: 'Verdana, sans-serif',
text: '7',
fromCenter: false
});
}
Genug geklagt.
Ich probiere es mit Jcanvas.
Ich muss gestehen, dass ich mir das mit Jcanvas zu machen mir nicht zugetraut habe
weil man als jcanvas - Anfäger zu leicht Fehler macht, die man lange sucht.,
Ich muss erst das große Rechteck zeichen,
Dann den Text , das meint die Zahl in dem Rechteck
dann das Rechteck für das Plus Zeichen
dann den Text + Zeichen
dann das Rechteck für das Minus Zeichen
dann das Minuszeichen selber
und dann muss sich die Zahkl im Rechteck ändern wenn man plus oder minus klickt.
Theoretisch kann ich es wahrscheinlich, aber praktisch??i
Die Canvas zeigt unten ( eingekreist) Möglichkeiten 3 Variable zu erhöhen oder zu verkleinern.
html-seminar.de/woltlab/attachment/1461/
So ein Kästchen ( Zahl und + -) wird durch die folgende Funktion erstellt.
function PlusMinus(x0,y0,w,h,was)
{
recZahlx=x0;
recZahly=y0;
recZahlBreite=w;
recZahlHoehe=h;
ctx1.lineWidth = 1;
ctx1.fillStyle = '#B5EC9B';
ctx1.strokeRect(recZahlx, recZahly, recZahlBreite,recZahlHoehe);
ctx1.fillRect(recZahlx, recZahly, recZahlBreite,recZahlHoehe);
ctx1.fillStyle = '#7EB5EA';
ctx1.fillStyle = 'black';
ctx1.fillText((was),recZahlx +10 , recZahly + recZahlHoehe*(2/3));
//////////////////
recPlusx=x0 + w;
recPlusy=y0;
recPlusBreite=30;
recPlusHoehe=h/2
ctx1.lineWidth = 1;
ctx1.fillStyle = '#B5EC9B';
ctx1.strokeRect(recPlusx, recPlusy, recPlusBreite,recPlusHoehe);
ctx1.fillRect(recPlusx, recPlusy, recPlusBreite,recPlusHoehe);
ctx1.fillStyle = '#7EB5EA';
ctx1.fillStyle = 'black';
ctx1.fillText(("+"),recPlusx+10,y0+recZahlHoehe/2 );
////////////////
recMinusx=x0+w;
recMinusy=y0+h/2;
recMinusBreite=30;
recMinusHoehe=15;
ctx1.lineWidth = 1;
ctx1.fillStyle = '#B5EC9B';
ctx1.strokeRect(recMinusx, recMinusy, recMinusBreite,recMinusHoehe);
ctx1.fillRect(recMinusx, recMinusy, recMinusBreite,recMinusHoehe);
ctx1.fillStyle = '#7EB5EA';
ctx1.fillStyle = 'black';
ctx1.fillText((" - "),recMinusx + 10,y0+recZahlHoehe );
}
function setzeUrsprung()
{
ctx1.fillStyle = '#B5EC9B';
ctx1.fillRect(links,100,200,60);
ctx1.strokeRect(links,100,200,60);
ctx2.fillStyle = '#B5EC9B';
ctx2.strokeRect(links+250,100,100,60);
ctx2.fillRect(links+250,100,100,60);
}
Diese Funktion wird dreimal aufgerufen und erzeugt so die 3 Kästchen.
Wenn ich jetzt diese Zahlen verändern will muss ich Plus oder Minus anklicken und abfragen ob sie angeklickt worden sind.
Beispiel Abfrage
var s2= xPos> recPlusx && xPos < recPlusx+recPlusBreite && yPos > recPlusy && yPos < recPlusy + recPlusHoehe
if (s2==true) { LaengeZahl(1) }
ich kann jetzt allerdings nur das 3. Kästchen anklicken. Das ist mir klar weil das zuletzt erstellt wird und die Variabeln im Program für jedes Kästchen den gleichen Namen haben.
Ich könnte jetzt für jedes Kästchen ein eigenes Porgaramm erstellen. Aber dann ersticke ich ja in Variablen.
Hat jemand einen Tipp wie ich das vermeiden kann?.
Ist bei Canvas eine Texteingabe möglich?
Hintergrund:
Ich möchte, dass der User den Schwierigkeitsgrad des Spiels über eine Eingabe selber bestimmen kann.
Da ich keine Möglichkeit gefunden habe bei Canvas Text einzugeben wäre mein Lösungsansatz, dass der User über das Anklicken von + oder – die Zahl verändert.
Siehe Bild
html-seminar.de/woltlab/attachment/1457/
Oder ist bei Canvas doch eine direkte Texteingabe möglich oder gibt es eine elegantere Lösung?
LG
Jochen
Sehr schön. Verstanden. Danke.
1 Frage
Die Laufanweisung
for (var x = xstart, y = ystart, nr = 0; nr < 10; nr++) {
kenne ich in der Form nicht so . Was bezweckt sie mit
var x = xstart, y = ystart,?
ich erzeuge mit canvas rechtecke über eine Schleife
for (var i=0;i<10;i++)
{
umbruch=(i>4)*1;
basisArray[0][i]=links+( i*recBreite-umbruch*5*recBreite);
basisArray[1][i]= yAnfang+umbruch*(recHoehe+10);
ctx3.rect((basisArray[0][i]),basisArray[1][i],recBreite,recHoehe);
ctx3.stroke();
ctx3.fillStyle = 'green';
ctx3.fillText(i,(10 + basisArray[0][i]),basisArray[1][i]+gFont+(recHoehe-gFont)/2);
}
Das Ergebnis sind 10 Rechtecke, dargestellt in zwei Zeilen und 5 Spalten mit den Zahlen von 0 bis 9
geht das auch mit jcanvas?
LG
Jochen
Wenn ich canvas und jcanvas in einem Programm nutze sind dann die Koordinaten für das Zeichnen unterschiedlich?
In dem folgenden Beispiel wird ctx4 und drawRect an untersiedlichen Positien gezeichnet obwohl die übergebenen Koordinaten identisch sind
<style type="text/css">
#canvas {
position: absolute;
top: 0px;
left: 0px;
border: 1px red solid;#thing;
background-color: #FFEFDB;
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="400" >
Your browser does not support the HTML5 canvas tag.
</canvas>
var c = document.getElementById("canvas");
var ctx4 = c.getContext("2d");
var canvas=$('canvas');
recStopx=2*links + recStartBreite;
recStopy=330;
recStopBreite=100;
recStopHoehe=30;
ctx4.rect(
recStopx,recStopy,recStopBreite,recStopHoehe);
$('canvas').drawRect({
fillStyle: 'red',
x: recStopx, y: recStopy,
width: recStopBreite, height: recStopHoehe
});
Das hatte ich vorher schon studiert und jetzt noch mal . Wie sagt Goethe "
„Da steh ich nun, ich armer Tor,
und bin so klug als wie zuvor.“
Auszug aus dem Code:
$('canvas').drawRect({
layer: true,
name: 'myBox',
fillStyle: 'blue',
x: 50, y: 50,
width: 100, height: 50
});
$('canvas').setLayer('myBox', {
fillStyle: 'red',
x: 350, y: 150,
})
.drawLayers();
es wird myBox nur einmal gezeichnet und zwar mit den Daten der Ursprungs mybox, die teils überschrieben werden von denen der zweiten myBox.
Ich möchte aber beide haben: Einmal in blue und einmal in red.
Dann weiteres ?
wenn ich eine zusätzliche Zeichnung einfüge:
$('canvas').drawRect({
layer: true,
name: 'myBox',
fillStyle: 'blue',
x: 50, y: 50,
width: 200, height: 50
});
$('canvas').drawArc({
strokeStyle: 'black',
strokeWidth: 5,
x: 100, y: 100,
radius: 50,
start: 0, end: 90
});
$('canvas').setLayer('myBox', {
fillStyle: 'red',
x: 350, y: 150,
})
.drawLayers();
drawArc,
dann wird die nicht gezeichnet . Keine Fehlermeldung.
Wenn ich einen Layer mit Namen angelegt habe wie hier z.B. mit dem Namen "Start"
$('canvas').drawRect({
layer: true,
name: 'Start',
fillStyle: '#585',
x: 100, y: 100,
width: 100, height: 50
});
kann ich diesen Layer im Programm an anderer Stelle über den Namen aufrufen und z.B. einen neuen fillStyle übergeben.
Gott zum Gruß
Jochen
Da danke ich den beiden Herren herzlich