HTML5 画布、文本和 JavaScript

发布于 2024-11-10 18:48:39 字数 410 浏览 1 评论 0原文

我有一个在画布上写入文本的脚本。效果很好。问题是，如果我进行 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);

原文

I have a script that writes text on a canvas. It works fine. The problem is if I make an Ajax call to first get the string and then secondly write the string to the canvas, JavaScript seems to ignore the order that I want things done and write the string before the Ajax call; the result is the script prints to the canvas '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);

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

无声静候 2024-11-17 18:48:39

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

Ajax is assync, so your code below the ajax call runs before the response from the server. You need to run your code only when the HTTP Response is received.

With jQuery, it would be something like this:

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

回复收藏 0 原文

纸伞微斜 2024-11-17 18:48:39

由于 ajax 调用是异步的，因此您必须将打印逻辑放入 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/

As ajax calls are asynchronous, you'll have to put your printing logic in the success callback of the ajax op.

For example:

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/

回复收藏 0 原文

~没有更多了~