HTML5 Canvas Metin İnme Değil ben <strong>kırmızı çerçeve rengi</strong> (<strong>inme renk</strong>) ve <strong>yeşil dolgu rengi</strong> HTML5 tuval üzerinde büyük metin yazmak istiyorum Düzgün

Question

Drawn.

strok genişliğini 5px'a veririm.

font size'u için 260px'dan daha az ayarlandığında iyiydi.

İşte benim ilk kod http://jsfiddle.net/8Zd7G/ geçerli:

var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 
ctx.font="240px Calibri"; 
ctx.strokeStyle = "F00"; //Red 
ctx.fillStyle = "0F0"; //Green 
ctx.lineWidth = 5; 
ctx.fillText("Big smile!",0,200); 
ctx.strokeText("Big smile!",0,200); 

Ama ayarladığınızda font size daha büyük veya 260 px eşit için, metin sınır/strok düzgün renkli değildir. Kırmızı renkle doldurulmayan kırmızı bir sınır vardı. İşte

benim ikinci kod http://jsfiddle.net/Pdr7q/ geçerli:

var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 
ctx.font="260px Calibri"; 
ctx.strokeStyle = "F00"; 
ctx.fillStyle = "0F0"; 
ctx.lineWidth = 5; 
ctx.fillText("Big smile!",0,200); 
ctx.strokeText("Big smile!",0,200); 

Sorum (ilk resim yerine ikinci bir gibi) uygun bir metin stoke büyük punto ile doldurmak nasıl olduğunu ? peşin :)

Answer 1

It t var calibri burada, ama ben Arial ile test ettik ve bu iyi çalışıyor (sizinkinden bile büyük 360px için yazı tipi boyutunu fark) Chrome'da yazı tipi boyutlarının 256 pikselin üstünde olduğu bilinen bir sorun. ölçekleme):
https://code.google.com/p/chromium/issues/detail?id=280221

anda soruna yönelik bir çözüm olabilir ancak daha sonra (son güncelleme 25. Ekim) de durumunu görmek için) Yukarıdaki iplik (bağlantıyı izlemek için görünmüyor.

Sorun, sorun hala devam etmesine rağmen, çizgi genişliğini azaltarak sorunu azaltabilirsiniz.

Diğer bir seçenek, boyutun yarısını (bu nedenle < 256 boyutunda) geçici bir tuvalin içine çekmek, daha sonra bu kanvasını ihtiyacınız olan boyuttaki ana ölçeklendirmeye çekmek.Metni daha bulanık yapacak ama inandığım kıvırcık versiyondan daha iyi görünecek.
https://bugzilla.mozilla.org/show_bug.cgi?id=909873

Answer 2

yılında Teşekkür Bu

var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 
ctx.font = '120pt Calibri'; 
ctx.strokeStyle = "#F00"; 
ctx.fillStyle = "#0F0"; 
ctx.lineWidth = 3; 
ctx.fillText("Big smile!",0,200); 
ctx.strokeText("Big smile!",0,200); 

Çalışma Demo ---> Sorun font-aile ile ilgili olabilir düşünüyorum jsFiddle

Answer 3

çalışıyor sen 'reib kullanma: "Calibri"

Ubuntu (Chrome 27) ile Chrome'dayım ve

var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 
ctx.font = '360px Arial'; 
ctx.strokeStyle = "#F00"; 
ctx.fillStyle = "#0F0"; 
ctx.lineWidth = 5; 
ctx.fillText("Big smile!",0,200); 
ctx.strokeText("Big smile!",0,200); 

Demo:

JSFiddle