如何在< canvas>上绘制文本标签 [英] How do you draw text on a <canvas> tag in Safari

问题描述

我一直在试验使用< canvas> 标签来绘制简单的图表和图表，到目前为止它很容易使用。我有一个问题想。我不知道如何在Safari上的< canvas> 上绘制文本。在Firefox 3.0中，我可以这样做：

I've been experimenting with using the <canvas> tag for drawing simple diagrams and charts, and so far it's pretty easy to work with. I have one issue thought. I can't figure out how to draw text on a <canvas> in Safari. In Firefox 3.0, I can do this:

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（）方法在苹果的Safari文档，但它似乎不支持在Safari 3.2中。

I've seen reference to a fillText() method in Apple's Safari docs, but it doesn't appear to be supported in Safari 3.2. Is this just something that's currently missing, or is it some well-kept secret?

推荐答案

我不相信Safari 3.2支持在画布中呈现文本。

I don't believe that Safari 3.2 supports rendering text in the canvas.

根据此博客，Safari 4测试版支持根据 HTML 5 canvas text APIs 。

According to this blog, Safari 4 beta supports rending text to the canvas, based on the HTML 5 canvas text APIs.

编辑：我已确认以下代码段在Safari 4测试版中可用：

edit: I have confirmed that the following snippet works in Safari 4 beta:

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

这篇关于如何在< canvas>上绘制文本标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！