通過讀取X，Y座標畫平方

Question

更新 這裏是我正在處理的代碼。我的代碼是使用PHP的Javascript。我是 ，讀取X，Y座標從MySQL數據庫中，然後能夠在 繪製矩形給出的位置。

我在我的表座標中有3個字段：coordinate_id，x_coord，y_coord。它有5-6個 行。

在我的代碼中，我先用一個方塊進行測試，它可以工作。現在，我想通過使用多維數組遍歷 數據庫，以便繪製所有的矩形。

非常感謝！

的Javascript PHP：

<div class="section_a" > 
       <p>Section A</p> 

       <canvas id="imageView" width="600" height="500"></canvas> 

       <script type="text/javascript"> 
        var ctx, cv; 
        cv = document.getElementById('imageView'); 
        ctx = cv.getContext('2d'); 
        ctx.lineWidth = 5; 
        ctx.strokeStyle = '#000000'; 

        <?php 
       $select_coordinate_query = "SELECT * FROM coordinates"; 
         $result = mysqli_query($conn,$select_coordinate_query); 

         //see if query is good 
         if($result === false) { 
         die(mysqli_error()); 
         } 

         //array that will have number of desks in map area 


         while($row = mysqli_fetch_assoc($result)){ 

          //get desk array count 
          //THIS IS WHERE I NEED HELP** 
          $desk = array(array("x" => $row['x_coord']), 
             array("y" => $row['y_coord']) 
             ); 

       //x, y coordinates 
          $x_pos = $desk['x']; 
          $y_pos = $desk['y']; 
          //x,y width and height 
          $x_size = $x_pos + 40; 
          $y_size = $y_pos + 10;  
        //HELP** 
        ?> 
        ctx.strokeRect(<?php echo "$desk[x]";?>, <?php echo "$desk[y]";?>,100 , 100);     
        <?  
         } //end while loop 
        ?> 
        </script> 

      </div> <!-- end div section_a --> 

Answer 1

你應該看看HTML5 Canvas

下面是一個例子：

var c = document.getElementById("container"); 
 
var ctx = c.getContext("2d"); 
 

 

 
// size of a "desk" 
 
var desk = { 
 
    width: 40, 
 
    height: 15 
 

 
}; 
 

 
/* simple desk example */ 
 
// coordinates of your desk 
 
var coords = { 
 
    x: 20, 
 
    y: 20 
 
}; 
 

 
ctx.rect(coords.x, coords.y, desk.width, desk.height); 
 
ctx.stroke(); 
 

 

 
/* multiple desks example - in blue */ 
 

 
// coordinates of each desk 
 
var desks = [ 
 
    { x: 20, y: 100 }, 
 
    { x: 130, y: 115 }, 
 
    { x: 200, y: 130 } 
 
]; 
 

 
ctx.beginPath(); 
 
ctx.lineWidth = "2"; 
 
ctx.strokeStyle = "blue"; 
 
for (var i = 0; i < desks.length; i++) { 
 
    ctx.rect(desks[i].x, desks[i].y, desk.width, desk.height); 
 
    ctx.stroke(); 
 
}

#container { 
 
    border:1px solid #d3d3d3; 
 
}

<canvas id="container" width="300" height="150"></canvas>