Multiple Animation Jcanvas

Da hast du recht. Ich habe es abgeändert.

var myVar = setInterval(Flieg, 500);
var j = 0;
function Flieg() {
for (let i = 0; i <= 2; i++) {
$('canvas').drawArc({
layer: true,
name: 'myBox' + j,
fillStyle: '#'+ Math.floor(Math.random()*16777215).toString(16),
x: Math.floor(Math.random() * 1000) + 100,
y:400,
// x: 50 + i * 30, y: 400,
radius: 20
});
$('canvas')
.animateLayer('myBox' + j, {
y: 0,
}, 1000, function (layer) {
});
j++
}
}

Wenn ich jetzt wissen möchte ob ein Ballon mit einer bestimmten Farbe z.B. Rot angeklickt wurde, kann ich ihn dann in der click funktion über mxBox+j ansprechen?. Gilt das let auch für den Index j?
wenn ich das über
 
Gilt das let auch für den Index j?
Daran habe ich gar nicht gedacht. Sicherlich nicht. Wenn es damit Probleme geben sollte, kann man es aber auch anders lösen.
Wenn ich jetzt wissen möchte ob ein Ballon mit einer bestimmten Farbe z.B. Rot angeklickt wurde, kann ich ihn dann in der click funktion über mxBox+j ansprechen?
Am besten gleich beim Erzeugen über jCanvas einen click-Handler registrieren, dann stellt sich Problem nicht.
 
document.getElementById('??????').addEventListener('click', clickHandler, false);


Aber auch hier brauch ich eine Id. Und die hab ich nicht .
 
Fehler: Bezeichner erwartet. Begreif nicht was ein Bezeichner da soll?

var myVar = setInterval(Flieg, 1000);
var j = 0;
function Flieg()
{

$('canvas').drawArc({
layer: true,
name: 'myBox' + j,
fillStyle: '#'+ Math.floor(Math.random()*16777215).toString(16),
x: Math.floor(Math.random() * 600) + 100,
y:400,
radius: 40,
});
$('canvas')
.animateLayer('myBox' + j, {
y: -100,
}, 4000, function (layer) {
});
click: function (layer)
{
fillStyle: 'blue',
alert(j)
};

j++

}
Rudi Ratlos
 
Ja, da war ein Syntaxfehler.
  1. Den Clickhandler musst Du beim Erzeugen des Layers registrieren.
  2. Beim Animieren musst du die vorgegebene Syntax einhalten: https://projects.calebevans.me/jcanvas/docs/animateLayers/
Dies funktioniert:
Javascript:
        var myVar = setInterval(Flieg, 1000);
        var j = 0;
        function Flieg() {

            $('canvas').drawArc({
                layer: true,
                name: 'myBox' + j,
                fillStyle: '#' + Math.floor(Math.random() * 16777215).toString(16),
                x: Math.floor(Math.random() * 600) + 100,
                y: 400,
                radius: 40,
                click: function (layer) {
                    layer.fillStyle = 'blue';
                }
            });
            $('canvas').animateLayer('myBox' + j, {
                y: -80
            }, {
                duration: 4000,
                easing: 'linear',
                step: function (now, fx, layer) {
                    // do something for each step of the animation
                },
                complete: function (layer) {
                    // still do something at end of animation
                }

            });
            j++

        }
 
Offenbar steht im click-Handler die ursprüngliche Umgebung nicht mehr zur Verfügung. Das Event feuert ja viel später, wenn das drawArc längst abgeschlossen ist. Daher muss man Javascript erneut sagen, auf welches Element es die Eigenschaft anwenden soll.
 
Zurück