Как вы рисуете текст в теге <canvas> в Safari

Я экспериментировал с использованием тега <canvas> для рисования простых диаграмм и диаграмм, и до сих пор он довольно прост в работе. У меня одна проблема. Я не могу понять, как рисовать текст на <canvas> в Safari. В Firefox 3.0 я могу это сделать:

Chart.prototype.drawTextCentered = function(context, text, x, y, font, color) {
  if (context.mozDrawText) {
    context.save();
    context.fillStyle = color;
    context.mozTextStyle = font;
    x -= 0.5 * context.mozMeasureText(text);
    context.translate(x, y);
    context.mozDrawText(text);
    context.restore();
  }
}

Я видел ссылку на метод fillText() в документах Apple Safari, но он, похоже, не поддерживается в Safari 3.2. Это что-то, что в настоящее время отсутствует, или это какая-то укрытая тайна?

Ответ 1

Я не верю, что Safari 3.2 поддерживает рендеринг текста в холсте.

Согласно этот блог, Safari 4 beta поддерживает разворачивающийся текст на холст, на основе HTML 5 текстовых API-интерфейсов.

изменить. Я подтвердил, что следующий фрагмент работает в Safari 4 beta:

<canvas id="canvas"></canvas>
<script>
    var context = document.getElementById("canvas").getContext("2d");
    context.fillText("Hello, world!", 10, 10);
</script>

Ответ 2

Это не идеально, и похоже, что вы прекрасно ожидаете, но для справки есть библиотека под названием strokeText, которая делает собственный рендеринг шрифтов. Он работает в Firefox 1.5+, Opera 9+, Safari (я не знаю, какие версии) и IE6 + (используя VML вместо холста).

Ответ 3

Если вы действительно хотите использовать текстовые методы HTML5, вы должны попробовать эту библиотеку: http://code.google.com/p/canvas-text/

и демо здесь: http://canvas-text.googlecode.com/svn/trunk/examples/index.html

Он все еще находится в альфа-стадии, поэтому любой отчет об ошибке и отзывы приветствуются!:)

Ответ 4

Я использую тег <canvas>, чтобы нарисовать логотип Facebook, но изображение, текст растянут.

<div class="content1">
   <canvas id = "e" class="myCanvas">
    <script>
        var canvas = document.getElementById("e");
        var context = canvas.getContext("2d");
        context.fillStyle = "white";
        context.font = "normal 64px Facebook Letter Faces";
        context.fillText("facebook",10, 100);
    </script>
     FACEBOOK
     </canvas>
</div>

Файл CSS:

.content1
{
    float:left;
    position:relative;
    width:180px;
    height:120px;
}

.myCanvas
{
    float:right;
    position:relative;
    width:170px;
    height:60px;
    margin-right:5px;
    margin-top:70px;
    background-color:#044692;

}