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

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

php mysql canvas

Php 将mySQL查询中的文本添加到画布,php,mysql,canvas,Php,Mysql,Canvas,在这段代码中，我成功地从一个mySQL数据库中获取了五个随机文本字符串，并可以通过PHP对它们进行响应我宁愿在附加代码的画布中（代替“Hello World”文本）将它们显示为文本，而不是通过PHP进行响应你知道我该怎么做吗 <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <canvas id="myCanvas" width="200" height="100"

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

我宁愿在附加代码的画布中（代替“Hello World”文本）将它们显示为文本，而不是通过PHP进行响应

你知道我该怎么做吗

<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']."";
        }
?>


var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.font=“30px Arial”；
ctx.fillText（“Hello World”，10,50）；

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

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

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

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

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


var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.font=“30px Arial”；
ctx.fillText（“，10,50”）；

注意用

标记注入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);

ctx.fillText（“，10,50）；
ctx.fillText（“，20,50”）；
ctx.fillText（“，30,50”）；
ctx.fillText（“，40,50”）；
ctx.fillText（“，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>


var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.font=“30px Arial”；
明亮的谢谢我知道下一步是构建一些for循环，以增加问题以及问题显示的位置。到目前为止，我只是在显示问题的代码中尝试了这一点（它不起作用！）：for（I=1；I<4；I++）{ctx.fillText（“，10,65”）}循环必须由PHP生成，但在我将其添加到我的答案之前：你真的不想将这5个文本放在同一位置，对吗？啊哈！因此，您需要在PHP代码中为问题编号创建一个循环，递增1，另一个循环（例如，为方框中的位置递增12）：）是时候阅读一些PHP了！我在我的回答中增加了一些建议。像通常一样，有很多方法可以做到这一点。PHP与HTML的混合可以通过几种方式实现。在这里，我选择在PHP循环中执行HTML的echo
根据你的第一个建议，现在我使用的是没有循环的。我最终会有五个以上的问题，并考虑让它们在画布上滚动，从而循环并增加它们显示的位置。