使用数据库中的坐标在画布上绘制点答案

【问题标题】：draw points on canvas using coordinates from database使用数据库中的坐标在画布上绘制点
【发布时间】：2018-06-05 09:28:16
【问题描述】：

我正在尝试使用 javascript 在画布上绘制点，但首先，我需要使用 php 从数据库中调用我的 x 和 y 坐标，并将它们存储在多维数组中，然后再使用 js 绘制它们。

这是我的代码，我的问题是我得到一个空白画布，或者换句话说，我的画布上没有绘制任何点

<?php
    $conn = mysqli_connect("localhost","root","","login");
    // Check connection
    if (mysqli_connect_errno()) {
        echo "Failed to connect to MySQL: " . mysqli_connect_error();
    }

    $query = "SELECT * FROM sample";

    if ($result = mysqli_query($conn,$query)) {
        echo 'var points=[';
        foreach( $result as $row ) {
            echo "{x:${row['x']}, y:${row['y']}},";
        }
        echo "];\n";
        mysqli_free_result($result);
    }
    mysqli_close($conn);
?>

for(var p in points) {
    ctx.beginPath();
    ctx.arc(p.x , p.y, 2, 0, 2 * Math.PI, false);
    ctx.fill();
    ctx.stroke();
    ctx.closePath();
 }

【问题讨论】：

您是否检查过您生成的var points 是有效的JSON？因为我认为您需要用" 包围您的键和值。
你忘了把你的js代码包装在<script> ... </script>标签里
@RiggsFolly 我有它，但我没有在上面显示的代码中包含它
看看json_encode()，它比手动创建 JSON 字符串要好得多
@wayneOS 你是什么意思？我对 javascript 很陌生，我对 JSON 并不熟悉。我上面的代码只是经过一些研究和其他人的一点帮助

标签： javascript php arrays database loops

【解决方案1】：

不是 php 专家，但这段代码有效：

<?php
$conn = mysqli_connect("localhost","root","","login");
// Check connection
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$query = "SELECT * FROM sample";

if ($result = mysqli_query($conn,$query)) {
  // Fetch one and one row
    $array=array();
    while ($row=mysqli_fetch_array($result, MYSQL_ASSOC))
    {
    array_push($array,[$row['x'],$row['y']]);
    }
 }
 mysqli_free_result($result);
 mysqli_close($conn);
 ?>
 <script>
 var canvas=document.getElementById('mon_canvas');
 var ctx=canvas.getContext('2d');
 var points =<?php echo json_encode($array) ?>;
 alert(points);
 for(var i=0;i<points.length;i++) {
    ctx.beginPath();
    ctx.arc(points[i][0] , points[i][1], 2, 0, 2 * Math.PI, false);
    ctx.fill();
    ctx.stroke();
    ctx.closePath();
 }
 </script>  
 </body>
 </html>

【讨论】：

成功了！唯一的问题是您放置了 MYSQL_ASSOC 而不是 MYSQLI_ASSOC 但无论如何，谢谢