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.