Question

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

Answer 1

我不相信Safari 3.2支持在画布中渲染文本。

根据this blog，Safari 4测试版支持根据HTML 5 canvas text APIs将文字转移到画布。

修改：我已确认以下代码段适用于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而不是画布）。

Answer 3

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

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

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

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;

}

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

4 个答案: