如何在 Safari 中的 <canvas> 标签上绘制文本答案

【问题标题】：How do you draw text on a <canvas> tag in Safari如何在 Safari 中的 <canvas> 标签上绘制文本
【发布时间】：2009-04-05 23:01:29
【问题描述】：

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

我在 Apple 的 Safari 文档中看到了对 fillText() 方法的引用，但 Safari 3.2 似乎不支持它。这只是目前缺少的东西，还是某个保守的秘密？

【问题讨论】：

FWIW，mozDrawText 已弃用，取而代之的是 fillText。见developer.mozilla.org/en/…
是的，我看到了，但它没有在 Firefox 3.0 中实现，只有 3.1 仍处于测试阶段。

标签： javascript safari canvas

【解决方案1】：

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

根据this blog，Safari 4 beta 支持将文本渲染到画布，基于HTML 5 canvas text APIs。

编辑：我已确认以下 sn-p 在 Safari 4 beta 中有效：

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

【讨论】：

酷，我可以在没有文字的情况下生活，直到 Safari 4 发布。
2009 年 12 月 14 日的 iPhone 怎么样？它支持什么？
那么带 Safari 5.1 的 iPad 3 怎么样？它是否支持带有 maxWidth 参数的 fillText 方法？
@Slenkra 我不知道；我猜是这样，但我没有 iPad，所以我无法测试它。你为什么不试试看？如果没有，我建议您单独提出一个问题，以便可能知道答案的人回答您。
我试过了，但不工作。我会问，但不允许我这样做。

【解决方案2】：

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

【讨论】：

很酷，但我现在使用 <canvas> 纯粹是内部的东西，我们都安装了 Firefox（有些正在使用 Safari 4 beta）。

【解决方案3】：

如果你真的想使用 HTML5 文本方法，你应该试试这个库： http://code.google.com/p/canvas-text/

演示在这里： http://canvas-text.googlecode.com/svn/trunk/examples/index.html

它仍处于 alpha 阶段，因此欢迎任何错误报告和反馈！:)

【讨论】：

【解决方案4】：

我正在使用<canvas>标签来绘制Facebook logo，但是图片、文字被拉伸了。

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

}

【讨论】：