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

在此代码中，我成功地从mySQL数据库中获取了五个随机文本字符串，并且可以通过PHP回显它们。将mySQL查询中的文本添加到画布上

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

任何想法，我将不得不这样做呢？

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

来源

2016-02-28 JayJay

把你的PHP代码块的HTML块之前，然后通过这个改变你的循环：

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

这只是把在阵列中的5个问题称为$问题。

然后，当你生成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>

你需要调整你将乘以$ index的因子（现在是10），以获得文本之间的正确垂直距离。

来源

2016-02-28 10:09:39 trincot

太棒了！谢谢！我知道下一步是建立一些for循环来增加问题以及它显示的位置。到目前为止，我只是围绕显示问题的代码尝试了这一点（它没有工作！）：for（i = 1; i <4; i ++）{ctx.fillText（“<？= $ questions [i ]>”，10,65）？; } – JayJay

那么循环将不得不由PHP生成，但在我将其添加到我的答案之前：你不是真的想把5个文本放在同一个位置，对吧？ – trincot

啊哈！所以你需要PHP代码中的问题编号循环，递增1，另一个循环递增，例如， 12为框中的位置。 :)时间来阅读一些PHP！ – JayJay

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

回答

相关问题