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/