Zeichnen von Text mit einem äußeren Strich mit HTML5-Canvas

Question

Ich verwende derzeit HTML5 Canvas, um eine Reihe von Zeichenfolgen mit der FillText-Methode zu rendern. Dies funktioniert gut, aber ich möchte auch jede Saite einen 1px schwarzen äußeren Schlag geben. Leider scheint die strokeText-Funktion einen inneren Strich anzuwenden. Um dem entgegenzuwirken, habe ich eine drawStrokedText-Funktion geschrieben, die den gewünschten Effekt erzielt. Leider ist es schrecklich langsam (aus offensichtlichen Gründen).

Gibt es eine schnelle, browserübergreifende Möglichkeit, einen 1px-Außenschlag mit nativer Canvas-Funktionalität zu erzielen?

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

Hier ist ein Beispiel für die Wirkung bei der Arbeit:

Answer 1

Was mit Schlaganfall ist falsch? Da die Hälfte des Strichs außerhalb der Form liegt, können Sie den Strich immer zuerst mit einer doppelten Strichbreite zeichnen. Wenn Sie also einen 4px äußeren Schlaganfall wollten könnten Sie tun:

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

Welche macht:

Live-Geige hier: http://jsfiddle.net/vNWn6/

---

Wenn das passiert nicht so aussehen genau bei kleineren Text-Rendering-Skalen, können Sie es immer groß, aber skalieren Sie es (im obigen Fall würden Sie tun ctx.scale(0.25, 0.25))

Answer 2

Simons Antwort ist eine gute Lösung, aber es kann mitering Störungen in einigen Fällen, insbesondere mit Kapital 'M', 'V', & 'W' hat:

drawStroked("MVW", 50, 150); 

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

In Im vorliegenden Fall ist es am besten zu nutzen:

ctx.miterLimit=2; 

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

Viel Glück!

Answer 3

Für einen reibungslosen Schatten können Sie diese

versuchen

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