HTML5, Canvas и FireFox - PullRequest
       9

HTML5, Canvas и FireFox

2 голосов
/ 10 марта 2011

У меня есть пара вопросов о коде HTML5-Canvas, показанном ниже.

  1. Текст не отображается в Firefox 3.6 (он отображается в Chrome.)
  2. Относительно переменной ctx (ctx = c.getContext ("2d")), следует ли повторно использовать эту переменную снова и снова для создания дополнительных прямоугольников, фигур и т. Д. На одном и том же холсте или желательно создать новый контекст переменные для новых прямоугольников, линий и т. д.? (Кажется, это работает в обоих направлениях, но я не понимаю, что такое стандартная практика.)

<!DOCTYPE html> 
<html lang="en">
<body>

<canvas id="myCanvas" width="400" height="350">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

    var c = document.getElementById("myCanvas");
    ctx = c.getContext("2d"); 


    ctx.lineWidth = 5;
    ctx.strokeStyle="black";    
    ctx.strokeRect(10,10,180,75);       

    ctx.textBaseline = 'Top';  
    ctx.font         = '20px Sans-Serif';
    ctx.fillStyle    = 'blue';
    ctx.fillText  ("hello", 30, 50);

</script>

</body>
</html>

1 Ответ

2 голосов
/ 10 марта 2011

Кажется, проблема в вашем вызове textBaseline.
Играя с ним в JSFiddle, кажется, что он чувствителен к регистру ... попробуйте сделать его строчным: ctx.textBaseline = 'top'

Сохранена для вас ссылка на скрипку: http://jsfiddle.net/NG8Yf/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...