HTML5キャンバス、テキスト、JavaScript

Question

キャンバスにテキストを書き込むスクリプトがあります。それはうまく動作します。問題は、最初に文字列を取得してから文字列をキャンバスに書き込むようにAjax呼び出しを行うと、JavaScriptがAjax呼び出しの前に文字列を書き込んで処理する順序を無視するように見えることです。結果はスクリプトがキャンバス「undefined」にプリントされます。

擬似コード：

//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

アヤックスは、assyncです。 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の呼び出しは非同期であるとして、あなたは、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/