將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查詢中的文本添加到畫布上

回答

相關問題