Làm thế nào để bạn vẽ văn bản trên một thẻ <canvas> trong Safari

Question

Tôi đã thử nghiệm bằng cách sử dụng thẻ <canvas> để vẽ sơ đồ và biểu đồ đơn giản và cho đến nay nó khá dễ dàng để làm việc. Tôi có một vấn đề suy nghĩ. Tôi không thể tìm ra cách vẽ văn bản trên <canvas> trong Safari. Trong Firefox 3.0, tôi có thể làm điều này:

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

Tôi đã nhìn thấy tham chiếu đến một phương pháp fillText() trong docs Safari của Apple, nhưng nó không xuất hiện để được hỗ trợ trong Safari 3.2. Đây có phải là điều gì đó hiện đang thiếu, hoặc là một số bí mật được giữ kín?

Answer 1

Tôi không tin rằng Safari 3.2 hỗ trợ hiển thị văn bản trong canvas.

Theo this blog, Safari 4 beta hỗ trợ văn bản tăng dần cho canvas, dựa trên HTML 5 canvas text APIs.

chỉnh sửa: Tôi đã xác nhận rằng đoạn mã sau đây làm việc trong Safari 4 beta:

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

Answer 2

Đây không phải là lý tưởng, và có vẻ như bạn cũng tốt chờ đợi, nhưng để tham khảo, có một thư viện được gọi là strokeText có hiển thị phông chữ riêng. Nó hoạt động trong Firefox 1.5+, Opera 9+, Safari (Tôi không biết phiên bản nào) và IE6 + (sử dụng VML thay vì canvas).

Answer 3

Nếu bạn thực sự muốn sử dụng các phương pháp văn bản HTML5, bạn nên cố gắng thư viện này: http://code.google.com/p/canvas-text/

và demo đang ở đây: http://canvas-text.googlecode.com/svn/trunk/examples/index.html

Nó vẫn đang trong giai đoạn alpha, vì vậy bất kỳ báo cáo lỗi và thông tin phản hồi được hoan nghênh! :)

Answer 4

Tôi đang sử dụng thẻ <canvas> để vẽ biểu tượng Facebook, nhưng hình ảnh, văn bản được kéo dài.

<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 file:

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

}