Safari의 <canvas> 태그에 텍스트를 그리는 방법

Question

간단한 다이어그램과 차트를 그리는 데 <canvas> 태그를 사용하여 실험을 해왔으며 지금까지 작업하기가 쉽습니다. 나는 한 가지 문제를 생각했다. Safari의 <canvas>에 텍스트를 그리는 방법을 알 수 없습니다. 나는 애플의 사파리 문서의 fillText() 방법에 대한 참조를 본 적이

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(); 
    } 
} 

하지만 사파리 3.2에서 지원하지 않는 것 : 파이어 폭스 3.0에서 나는이 작업을 수행 할 수 있습니다. 이것은 현재 누락 된 것입니까 아니면 잘 보관 된 비밀입니까?

Answer 1

Safari 3.2가 캔버스에서 텍스트 렌더링을 지원한다고 생각하지 않습니다.

this blog에 따르면 Safari 4 베타는 HTML 5 canvas text APIs을 기반으로 캔버스에 문자를 렌더링하는 기능을 지원합니다.

편집 : 다음 코드는 사파리 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 사용)에서 작동합니다. 당신이 정말로 HTML5 텍스트 방법을 사용하려면

Answer 3

,이 라이브러리를 시도해야합니다 : http://code.google.com/p/canvas-text/

및 데모 현재 위치 : http://canvas-text.googlecode.com/svn/trunk/examples/index.html

그것은 알파 단계에 아직도있다, 그래서 어떤 버그 보고서 의견을 환영합니다 :)

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; 

}