HTML 5 Canvas



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


  • Liegt an deinem JavaScript. Wieso eig. das JavaScript?

    :schland:



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



  • 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:


Anmelden zum Antworten