php - 从数据库绘制 Canvas 文本？

Question

我正在尝试一些 Canvas 东西，

这是我的代码，任何人都可以阐明如何在 JavaScript 中使用 sqlvariables 吗？

<script type="text/javascript">
 window.onload = function(){
 var canvas = document.getElementById("myCanvas");
 var context = canvas.getContext("2d");
 var imageObj = new Image();
 imageObj.onload = function(){
     context.drawImage(imageObj, 0, 0);
     context.font = "40pt Calibri";

     context.fillText("Aanvaller1", 75, 260);
     context.fillText("Aanvaller2", 450, 260);

     context.fillText("Mid1", 200, 560);         
     context.fillText("Mid2", 450, 560);

      context.fillText("Verdediger1", 70, 860);
      context.fillText("Verdediger2", 425, 860);

      context.fillText("Keeper", 310, 1010);
    };
 imageObj.src = "voetbalveld2.png"; 
};
</script>


<canvas id="myCanvas" width="804" height="1200"></canvas>

因此，这将根据需要绘制我的文本，但我希望能够查询数据库并将数据库中的名称放在我现在硬编码文本的位置。提前致谢。

我不需要如何查询数据库等的代码，我只需要知道如何将它与js和canvas结合使用。

Answer 1

Javascript运行在客户端浏览器中，SQL数据库存储在服务器上。您需要的是能够使用客户端代码查询服务器以检索数据。我正在考虑的是介于两者之间的某种中间语言(PHP 将是我的选择)和 Ajax。

因此您的 Javascript 可以通过 Ajax 请求调用 PHP 页面； PHP 返回一个 XML/Json，其中包含结构化格式的所有变量，然后 Js 可以解析该 XML/Json 并将其插入 Canvas 代码中。

getNames.php
--------------
// mysql stuff goes here
$arr = array('name1' => 'Aanvaller1', 'name2' => 'Aanvaller2', 'name3' => 'Mid1');
echo json_encode($arr);

JavaScript 代码:

<script type="text/javascript">
  $(document).ready(function(){
    var json = null;
    $.ajax({
        'async': false,
        'global': false,
        'url': 'getNames.php',
        'dataType': "json",
        'success': function (data) {
            json = data;
        }
    });
  });

您现在有一个名为“json”的变量，其中包含您的 mysql 数据。解析它并将其粘贴到 Canvas 中。