12

我一直在尝试使用<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 似乎不支持它。这只是目前缺少的东西，还是一些保守的秘密？

4

4 回答 4

14

我不相信 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>
于 2009-04-05T23:13:21.410 回答
4

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

于 2009-04-06T04:41:05.757 回答
3

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

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

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

于 2009-04-17T20:01:23.520 回答
0

我正在使用<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;

}
于 2012-07-20T07:04:16.330 回答