如何在Safari中在<canvas>标记上绘制文本

根据 this blog ,Safari 4 beta版支持基于 HTML 5 canvas text APIs .

:我已确认以下代码段在Safari 4 beta版中有效:

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

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

如果您真的想使用HTML5文本方法,您应该尝试以下库: http://code.google.com/p/canvas-text/

演示如下: http://canvas-text.googlecode.com/svn/trunk/examples/index.html

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

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

}