HTML5画布，文本和JavaScript

问题描述

| 我有一个在画布上写文本的脚本。工作正常。问题是，如果我先进行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);

    

解决方法

        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);
});

    ,        由于ajax调用是异步的，因此您必须将打印逻辑放入ajax op的

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);
    }
});

http://jsfiddle.net/BhENZ/