HTML5 Canvas, Text и JavaScript

Question

У меня есть скрипт, который пишет текст на холсте. Он работает нормально. Проблема в том, что если я сделаю вызов Ajax, чтобы сначала получить строку, а затем, во-вторых, записать строку на холст, JavaScript, похоже, проигнорирует порядок, который я хочу сделать, и напишу строку перед вызовом Ajax; в результате сценарий печатает на холсте «undefined».

psuedocode:

//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, так что ваш код ниже вызова 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 обратного вызова Аякса цит.

Например:

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/