Как рисовать текст на теге <canvas>в Safari

Question

Я экспериментировал с использованием тега <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. Это просто что-то, чего сейчас не хватает, или это какой-то хорошо сохранившийся секрет?

Answer 1

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

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

edit : я подтвердил, что в бета-версии Safari 4 работает следующий фрагмент:

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

Answer 2

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

Answer 3

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

и демоверсии здесь: http://canvas -text.googlecode.com / SVN / багажник / примеры / index.html

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

Answer 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;

}