Rysowanie tekstu za pomocą zewnętrznego obrysu przy użyciu obrazu HTML5

Question

Aktualnie używam kanwy HTML5 do renderowania wielu ciągów znaków za pomocą metody fillText. Działa to dobrze, ale chciałbym również nadać każdemu ciągowi zewnętrzny zewnętrzny obrys o wielkości 1 piksela. Niestety funkcja strokeText wydaje się stosować obrys wewnętrzny. Aby temu przeciwdziałać, napisałem funkcję drawStrokedText, która pozwala osiągnąć pożądany efekt. Niestety jest okropnie wolno (z oczywistych powodów).

Czy istnieje szybki, oparty na przeglądarce tryb uzyskiwania zewnętrznego obrysu o 1 pikselu z wykorzystaniem rodzimej funkcjonalności płótna?

drawStrokedText = function(context, text, x, y) 
{ 
    context.fillStyle = "rgb(0,0,0)"; 
    context.fillText(text, x-1, y-1); 
    context.fillText(text, x+1, y-1); 
    context.fillText(text, x-1, y); 
    context.fillText(text, x+1, y); 
    context.fillText(text, x-1, y+1); 
    context.fillText(text, x+1, y+1); 

    context.fillStyle = "rgb(255,255,255)"; 
    context.fillText(text, x, y); 
}; 

Oto przykład efektu pracy:

Answer 1

Co się stało z udarem? Ponieważ połowa obrysu będzie poza formą, zawsze możesz najpierw narysować obrys z szerokością linii podwójnej, którą chcesz. Więc jeśli chciałeś 4PX zewnętrzny obrys można zrobić:

function drawStroked(text, x, y) { 
    ctx.font = "80px Sans-serif" 
    ctx.strokeStyle = 'black'; 
    ctx.lineWidth = 8; 
    ctx.strokeText(text, x, y); 
    ctx.fillStyle = 'white'; 
    ctx.fillText(text, x, y); 
} 


drawStroked("37°", 50, 150); 

sprawia, który:

żywo skrzypce tutaj: http://jsfiddle.net/vNWn6/

---

jeśli tak się stanie, aby nie wyglądać jak dokładne przy mniejszych skalach renderowania tekstu, zawsze możesz go narysować, ale zmniejszyć (w powyższym przypadku zrobiłbyś ctx.scale(0.25, 0.25))

Answer 2

Simona odpowiedź jest dobrym rozwiązaniem, ale może mieć usterki ukośnej w niektórych przypadkach, zwłaszcza z kapitałem 'M', 'V', & 'W':

drawStroked("MVW", 50, 150); 

http://jsfiddle.net/hwG42/1/

W ten przypadek, to najlepiej wykorzystać:

ctx.miterLimit=2; 

http://jsfiddle.net/hwG42/3/

Powodzenia!

Answer 3

Na gładkiej cieniu można spróbować to

ctx.beginPath(); 
ctx.fillStyle = 'white'; 
ctx.font = "bold 9pt Tahoma"; 
ctx.shadowBlur = 3; 
ctx.textAlign = "center"; 
ctx.shadowColor = "#000000"; 
ctx.shadowOffs = 0;     
ctx.fillText('www.ifnotpics.com', 100, 50);   
ctx.closePath();