Javascript 如何在a<；上绘制文字；帆布>；狩猎中的标签

我一直在尝试使用

标记来绘制简单的图表，到目前为止，它非常容易使用。我有一个想法。我不知道如何在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();
  }
}

---

我在苹果的Safari文档中看到了对

fillText（）

方法的引用，但Safari 3.2似乎不支持该方法。这只是目前缺少的东西，还是保守的秘密？

我认为Safari 3.2不支持在画布中呈现文本

据介绍，Safari 4 beta支持基于文本格式将文本呈现到画布上

编辑：我已确认以下代码片段在Safari 4 beta版中有效：

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

var context=document.getElementById（“画布”）.getContext（“2d”）；
fillText（“你好，世界！”，10，10）；

这并不理想，看起来您可以等待，但作为参考，有一个名为的库，它自己进行字体渲染。它适用于Firefox 1.5+、Opera 9+、Safari（我不知道是什么版本）和IE6+（使用VML而不是canvas）。

如果您真的想使用HTML5文本方法，您应该尝试以下库：

演示如下：

它仍处于alpha阶段，因此欢迎任何bug报告和反馈！）

我正在使用

标记来绘制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>

---

FWIW，

mozDrawText

被弃用，取而代之的是

fillText

。是的，我看到了，但是Firefox 3.0没有实现，只有3.1还在测试中。很酷，在Safari 4发布之前，我可以不使用文本。那么2009年12月14日的iPhone呢？它支持什么？带Safari 5.1的iPad3呢？它支持带有maxWidth参数的fillText方法吗？@Slenkra我不知道；我想是的，但我没有iPad，所以无法测试。你为什么不试试呢？或者，如果不是，我建议问一个单独的问题，这样可能知道答案的人可以回答你。我试过了，但不起作用。我会问，但我不允许。很酷，但我现在使用

纯粹是内部的东西，我们都安装了Firefox（有些使用Safari 4 beta）。

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

}