Question

在这段代码中，我成功地从mySQL数据库中获取了五个随机文本字符串，并可以通过PHP回显它们。

我不想通过PHP回显它们，而是希望将它们显示为画布中的文本（代替附加代码的＆＃34; Hello World＆＃34;文本）。

关于我将如何进行此操作的任何想法？

<HTML>
<HEAD>
    <TITLE></TITLE>
</HEAD>
<BODY>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>

<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.font = "30px Arial";
    ctx.fillText("Hello World",10,50);
</script>

<?PHP
    //CREATE CONNECTION
    $con=mysqli_connect('localhost','','');
    //select database
    if(!mysqli_select_db($con,'test')) {
        echo "database not selected";
    }
    //select query
    //select random question
    $sql=   
        "select * from `general knowledge`
        order by rand()
        limit 5";
    //execute sql query
    $records= (mysqli_query($con,$sql));
        while ($row=mysqli_fetch_array($records)) {
            echo "<P>";
            echo "".$row['Question Text']."";
        }
?>

Answer 1

将PHP代码块放在HTML块之前，然后通过以下方式更改循环：

    while ($row=mysqli_fetch_array($records)) {
        $questions[] = $row['Question Text'];
    }

这只是将5个问题放在一个名为 $ questions 的数组中。

然后，当您生成HTML时，您可以执行以下操作：

<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.font = "30px Arial";
    ctx.fillText("<?= $questions[4]?>",10,50);
</script>

注意注入带有<?= ?>标记的PHP值。然后，您可以注入五个问题中的任何一个。例如：

    ctx.fillText("<?= $questions[0]?>",10,50);
    ctx.fillText("<?= $questions[1]?>",20,50);
    ctx.fillText("<?= $questions[2]?>",30,50);
    ctx.fillText("<?= $questions[3]?>",40,50);
    ctx.fillText("<?= $questions[4]?>",50,50);

如果你真的想要一个循环（它真的有用吗？），你可以用PHP编写一个：

<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.font = "30px Arial";
<?php
foreach ($questions as $index => $question) {
     echo "    ctx.fillText('$question', 10+$index*10, 50);\n";
}
?>
</script>

您需要调整因子（现在是10），您可以使用 $ index 来获得文本之间的正确垂直距离。

将mySQL查询中的文本添加到画布上

1 个答案: