Js canvas fillRect() Koordinaten als Variable funktioniert nicht

Question

Ich habe eine Leinwand Quadrat wie folgt: draw.fillRect(sq); und davor: sq = "400, 400, 0, 0";. Die Konsole sagt

"Nicht genug Argumente zu CanvasRenderingContext2D.fillRect.".

Ich nehme an, das ist, weil es sq als ein Argument behandelt. Gibt es eine Möglichkeit, dies zu vermeiden? Um alle vier Argumente in einer Variablen zu speichern?

Vielen Dank im Voraus.

Answer 1

Sie sind richtig, Ihre sq ist eine einzelne Zeichenfolge und daher als eine einzelne Variable behandelt. Stattdessen versuchen, wie ein Array zu verwenden:

var sq = [400, 400, 0, 0]; 

Und dann

draw.fillRect.apply(draw, sq); 

apply ruft Ihre Funktion mit den in sq vorgesehen Argumente. Weitere Informationen finden Sie unter Documentation for Function.prototype.apply bei MDN.

---

HINWEIS: Sie versuchen, ein Rechteck auf x = y = 400 mit width = heigth = 0 zu ziehen. Sie werden also nicht viel sehen, da die Größe Ihres Rechtecks ​​0 ist. Sie sollten also Ihre Parameter ändern. Schauen Sie sich die documentation of the .fillRect() Methode an.

Answer 2

Ihre Annahme ist richtig, "fillRect" benötigt 4 Argumente.

Hier ein Vorschlag, wie sie in einer Variablen speichern:

Var rectData = { 
"x": 400, 
"y": 400, 
"width": 0, 
"height": 0 
}; 

Und als es so verwenden:

draw.fillRect(rectData.x,rectData.y, rectData.width, rectData.height); 

Durch die Art und Weise: eine Breite/Höhe von 0 wahrscheinlich zu verwenden ist nicht was du willst. Sie werden kein Rechteck sehen :) Testen Sie zuerst Ihre Code-Snippets, z. in der Mozilla Developer Network.

Verglichen mit der 'Anwenden'-Lösung, macht die Verwendung eines Objektliterals Ihren Code lesbarer, so dass das Debuggen einfacher wird.