Question

我对context.fillText（）函数有点问题。

当我使用它调用函数时，它不会绘制文本，除非我在启动“mainloop”后调用它。在同一个函数中调用的所有context.fillRect（）都可以完美地工作。

这是我的代码。我写了几条评论来强调它的工作原理或不起作用。



var pause = true;

function draw () {
    if ( !pause ) {
        redraw_everything();
    }
    else {
        draw_popup(); // WORKAROUND
    }
}

function draw_popup ( text ) {
    ctx.fillStyle = 'red';
    ctx.fillRect ( _x, _y, _w, _h );
    ctx.fillStyle = 'black';
    ctx.fillRect ( _in_x, _in_y, _in_w, _in_h );

    ctx.font = theight + "pt Orbitron";
    twidth = ctx.measureText ( text ).width;

    ctx.fillStyle = 'red';
    ctx.fillText ( text, _tx, _ty );  /** Draw the text */
    ctx.restore();
}

function init() {
    canvas = document.getElementById ( 'tutorial' );
    ctx = canvas.getContext ( '2d' );

    pause = false;
    draw();
    pause = true;
    setInterval ( 'draw()', 20 );
    draw_popup ( 'PacMan' ); // DOESN'T WORK

    tutorial = document.getElementsByTagName( 'body' )[ 0 ];
    tutorial.onkeypress = function ( e ) {
        var c = String.fromCharCode( e.charCode ).toLowerCase();
        if ( c == 'p' ) {
             draw_popup ( 'Pause' ); // IT WORKS
        }
    }
}

您可以找到完整的源代码here

UPDATE ：根据要求，我做了一个较短的例子（未经测试）。

Answer 1

我发现了问题。我使用的是Google Webfont集合中的字体。我第一次使用它时，字体尚未加载，因此它不会写入。以下请求已经加载了字体，因此我工作

HTML5 / Canvas中context.fillText（）的奇怪行为

1 个答案: