jcanvas Rectangle dynamisch erzeugen

Jochen · 8. März 2018

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

Sempervivum · 8. März 2018

Selbstverständlich:

Code

            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;
                }
            }

Alles anzeigen

Jochen · 9. März 2018

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,?

Sempervivum · 9. März 2018

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.

jcanvas Rectangle dynamisch erzeugen

Jetzt mitmachen!

Teilen

Tags