У меня небольшая проблема с функцией context.fillText ().
Когда я вызываю функцию, используя ее, она не рисует текст, если я не вызываю ее после запуска «mainloop». Все context.fillRect (), вызываемые в одной и той же функции, работают отлично.
Вот мой код. Я пишу пару комментариев, чтобы подчеркнуть, где это работает или не работает.
</p>
<pre><code>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
}
}
}
Вы можете найти полный исходный код здесь
ОБНОВЛЕНИЕ : Как я и просил, я сделал более короткий пример (не тестировался).