HTML5, JavaScript et le dessin de plusieurs rectangles dans une toile

Pourquoi ne pas en faire mon plusieurs rectangles de dessiner sur le canevas?

<!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>

Merci pour l'aide.

Je vais jeter un oeil à votre code en une seconde, mais je voulais juste que vous sachiez que la jCanvas plugin pour jQuery simplifie le dessin sur la toile beaucoup. Vous pouvez prendre un coup d'oeil. 🙂

OriginalL'auteur Hello-World | 2013-03-05

  1. 14

    Ok, donc vous avez été près de là.
    Lorsque vous parcourez le tour de votre tableau de rectangles, vous êtes une itération sur le tableau clé pas les objets eux-mêmes (voir Comment faire une Boucle à travers la plaine objet JavaScript avec des objets que les membres?).
    De Plus, comme @jimjimmy1995 souligné, vous devez définir le fond à l'aide de .fillStyle. fillRect n'ont pas de remplir paramètre.

    Ce code fonctionne:

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

    }

}

    OriginalL'auteur Raad

  2. 1

    N'avez-vous pas besoin de lui donner la couleur de remplissage?

    context.fillStyle = i.fill;
context.fillRect(i.x,i.y,i.w,i.h);
    Oui, vous avez raison, mais ce n'est pas le problème - il y a un problème avec l'obtention de la matrice de valeurs dans la boucle.
    Vous semblent manquer un peu de la ligne de terminators. En êtes-vous des erreurs?
    Hehe pas de problème; Il se rendre à un point où vous commencez la finition de phrases avec un point-virgule et pas seulement le code; 😛

    OriginalL'auteur James Coyle