HTML 5 Canvas

Samyboy

Hallo,

Ich versuche gerade mit HTML 5 Canvas ein Schachbrett auszugeben. Leider funktioniert das nicht wie gewollt, es erscheint bloss ein einziges Feld oben links (braun).

Hat vielleicht irgend jemand eine Idee?

Vielen Dank im vorraus!

<html>
 <head>
  <script type="text/javascript">
    // This function draws a 8 x 8 chess board using canvas that were defined in the body tag
    function drawChessBoard(startPosX, startPosY, width, height) {
      var colors = new Array("rgb(255, 255, 200)", "rgb(160, 82, 45)");
      var currentColor = 0;

      for (var i = 0; i < 8; i++) {
        for (var j = 0; j < 8; j++) {
          var currentField = document.getElementById(i + '' + j);
          var currentFieldCanvas = currentField.getContext('2d');
          currentFieldCanvas.fillStyle = colors[currentColor];
		  currentFieldCanvas.fillRect(startPosX + width*i, startPosY + height*j, 50, 50);
          currentColor = (currentColor==0?1:0);
        }
      }
	  alert("That's it, yo");
    }
  </script>
 </head>
 <body onload="drawChessBoard(0, 0, 50, 50);">
  <?php
   for ($i = 0; $i < 8; $i++) {
     for ($j = 0; $j < 8; $j++) {
       echo '<canvas id="' . $i . $j . '" width="50" height="50"></canvas>';
	   echo "ID: " . $i . $j;
	 }
   }
  ?>
 </body>
</html>

PRIEST

Liegt an deinem JavaScript. Wieso eig. das JavaScript?

:schland:

Samyboy

PRIEST schrieb:

Liegt an deinem JavaScript. Wieso eig. das JavaScript?

:schland:

Siehst du denn den Fehler?

Gibt es denn sonst eine Variante, wie ich auf die Canvas zugreifen kann in einem Loop?

PRIEST

Ich verstehe halt gerade nicht wieso du zum zeichnen javascript benötigst?

<?php
  $var = 1;
   for ($i = 0; $i < 8; $i++) {
   	echo '<br/>';
     for ($j = 0; $j < 8; $j++) {
       if($var == 0){
       		echo '<canvas id="' . $i . $j . '" style="background:black; width:50px; height:50px;">' . 'ID: ' . $i . $j . '</canvas>' . "\n";
   		}else{
   	  		 echo '<canvas id="' . $i . $j . '" style="background:white; width:48px; height:48px; border: 1px solid black;">' . 'ID: ' . $i . $j . '</canvas>' . "\n";
   	   }
   	   	($var == 0) ? $var = 1 : $var = 0;
     }
     ($var == 0) ? $var = 1 : $var = 0;
   }
  ?>

Edit:: Achja wegen dem "Fehler" - onload macht keinen Sinn wenn du die Canvas erst erstellst. Da ist die Funktion schneller als die Canvas überhaupt existieren
Edit2:: Jetzt schreib ichs doch noch dazu :D. Am besten packst du die Canvas auch noch in einen Container und floatest die einzelnen Felder. Besser als das <br/>. Und natürlich lieber mit CSS-Klassen arbeiten. ^^ .. usw. naja is ja nur ein Beispiel jetzt.

:schland: