HTML5, JavaScript und zeichnen Sie mehrere Rechtecke in einem canvas

Warum nicht meine mehrere Rechtecke zeichnen im canvas-Bereich?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title></title>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
  </head>
  <body>
    <canvas id="myCanvas" width="500" height="500" style="border:1px solid red">
      <p>Your browser doesn't support canvas.</p>
    </canvas>
  </body>
</html>

<script type ="text/javascript">  
  function Shape(x, y, w, h, fill) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.fill = fill;
  }

  //get canvas element.
  var elem = document.getElementById('myCanvas');

  //check if context exist
  if (elem.getContext) {

    var myRect = [];

    myRect.push(new Shape(10, 0, 25, 25, "#333"))
    myRect.push(new Shape(0, 40, 39, 25, "#333"))
    myRect.push(new Shape(0, 80, 100, 25, "#333"))

    context = elem.getContext('2d');
    for (i in myRect) {

      //console.log(x);

      context.fillRect(i.x, i.y, i.w, i.h)
    }
    ////x, y, width, height
    //context.fillRect(0, 0, 50, 50);

    ////x, y, width, height      
    //context.fillRect(75, 0, 50, 50);
  }
</script>

Danke für die Hilfe.

  • Ich nehme einen Blick auf den code in eine zweite, aber wollte nur lassen Sie wissen, dass die jCanvas plugin für jQuery vereinfacht die Zeichnung auf der Leinwand eine Menge. Möchten Sie vielleicht einen Blick drauf werfen. 🙂
InformationsquelleAutor Hello-World | 2013-03-05
  1. 15

    Ok, Sie waren also fast da.
    Wenn Sie Durchlaufen, um Ihre array von Rechtecken, Sie sind der Iteration über das array Schlüssel nicht die Objekte selbst (siehe Wie eine Schleife durch einfachen JavaScript-Objekt mit Objekten, die als Mitglieder?).
    Plus, wie @jimjimmy1995 darauf hingewiesen, müssen Sie legen Sie die Füllung mit .fillStyle als .fillRect keinen fill-parameter.

    Dieser code funktioniert:

    function Shape(x, y, w, h, fill) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.fill = fill;
}

//get canvas element.
var elem = document.getElementById('myCanvas');

//check if context exist
if (elem.getContext) {

    var myRect = [];

    myRect.push(new Shape(10, 0, 25, 25, "#333"));
    myRect.push(new Shape(0, 40, 39, 25, "#333"));
    myRect.push(new Shape(0, 80, 100, 25, "#333"));

    context = elem.getContext('2d');
    for (var i in myRect) {
        oRec = myRect[i];
        context.fillStyle = oRec.fill;
        context.fillRect(oRec.x, oRec.y, oRec.w, oRec.h);

    }

}
    InformationsquelleAutor Raad
  2. 1

    Nicht, Sie müssen es geben, die Füllfarbe?

    context.fillStyle = i.fill;
context.fillRect(i.x,i.y,i.w,i.h);
    • Yep, du hast Recht - aber das ist nicht das große Problem - es gibt ein problem mit dem bekommen der array-Werte in der Schleife.
    • Sie scheinen zu fehlen ein paar Zeilenende-Zeichen. Sind Sie immer Fehler?
    • Hehe kein problem; Es zu einem Punkt, wo Sie beginnen, vollenden Sätze mit einem Semikolon, nicht nur code; 😛
    InformationsquelleAutor James Coyle
Schreibe einen Kommentar