HTML5画布，文字和JavaScript

Question

我有一个在画布上写文字的脚本。它工作正常。问题在于，如果我先进行Ajax调用以首先获取字符串，然后再将该字符串写入画布，JavaScript似乎忽略了我希望完成的操作的顺序并在Ajax调用之前写入字符串;结果是脚本打印到画布“未定义”。

伪代码：

//var str = ~some_ajax_call... <---If I use this, the output is undefined. 
var str = "hello world"; 

context.fillStyle = '#00f'; 
context.font   = 'italic 30px sans-serif'; 
context.textBaseline = 'top'; 
context.fillText (str, 0, 0); 

Answer 1

Ajax是assync，使Ajax调用下面的代码从服务器的响应之前运行。只有在收到HTTP响应时才需要运行代码。

使用jQuery，这将是这样的：

$.ajax({ 
    url: "sample.php", 
    success: function(d) { 
    context.fillStyle = '#00f'; 
    context.font   = 'italic 30px sans-serif'; 
    context.textBaseline = 'top'; 
    context.fillText (d, 0, 0); 
}); 

Answer 2

随着Ajax调用是异步的，你必须把你的打印逻辑在success回调AJAX运算的。

例如：

var str = "hello world"; 

$.ajax({ 
    url: '/echo/json/', 
    success: function(data){ 
     var context = document.getElementById('c').getContext('2d'); 
     context.fillStyle = '#00f'; 
     context.font   = 'italic 30px sans-serif'; 
     context.textBaseline = 'top'; 
     context.fillText (str, 0, 0); 
    } 
}); 

http://jsfiddle.net/BhENZ/