Question

更新这是我正在处理的代码。我的代码是PHP的Javascript。我读取X，Y从MySQL数据库坐标，然后能够绘制一个矩形给出的立场。

我的表格坐标中有3个字段：coordinate_id，x_coord，y_coord。它有5-6 行。

在我的代码中，我首先使用一个正方形进行测试，然后才有效。现在，我想循环数据库通过使用多维数组，所以我可以绘制所有的矩形。

提前谢谢你，非常感谢！

使用PHP的Javascript：

<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

以下是一个示例：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

通过读取X，Y坐标绘制正方形

1 个答案: