Vẽ văn bản bằng nét ngoài với canvas của HTML5

Question

Tôi hiện đang sử dụng canvas của HTML5 để hiển thị một số chuỗi bằng phương thức fillText. Điều này làm việc tốt, nhưng tôi cũng muốn cung cấp cho mỗi chuỗi một đột quỵ bên ngoài màu đen 1px. Thật không may, hàm strokeText dường như áp dụng một đột quỵ bên trong. Để chống lại điều này, tôi đã viết một hàm drawStrokedText để đạt được hiệu ứng mà tôi theo sau. Thật không may nó là khủng khiếp chậm (vì lý do rõ ràng).

Có cách nào nhanh chóng, qua trình duyệt để đạt được đột quỵ bên ngoài 1px sử dụng chức năng canvas gốc không?

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

Dưới đây là một ví dụ về tác dụng tại nơi làm việc:

Answer 1

Có gì sai với đột quỵ? Vì một nửa hành trình sẽ nằm ngoài hình dạng, bạn luôn có thể vẽ nét đầu tiên với chiều rộng đường gấp đôi những gì bạn muốn. Vì vậy, nếu bạn muốn có một cơn đột quỵ ngoài 4px bạn có thể làm:

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

Mà làm:

fiddle sống ở đây: http://jsfiddle.net/vNWn6/

---

NẾU điều đó xảy ra để không nhìn như chính xác ở quy mô hiển thị văn bản nhỏ hơn, bạn luôn có thể vẽ tỷ lệ lớn nhưng giảm tỷ lệ xuống (trong trường hợp trên bạn muốn thực hiện ctx.scale(0.25, 0.25))

Answer 2

câu trả lời của Simon là một giải pháp tốt, nhưng nó có thể có trục trặc mitering trong một số trường hợp, đặc biệt là với vốn 'M', 'V', & 'W':

drawStroked("MVW", 50, 150); 

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

Trong trường hợp này, cách tốt nhất là sử dụng:

ctx.miterLimit=2; 

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

Chúc bạn may mắn!

Answer 3

Đối với một bóng mịn bạn có thể thử này

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