从数据库中绘制画布文本？

Question

我正在尝试一些画布的东西，

这是我的代码，谁能解释一下如何在 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 可以对其进行解析并插入到画布代码中。

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 数据。解析它并将其粘贴到您的画布中。