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>

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

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

Answer 1

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

从db绘制画布文本？

1 个答案: