Metin Yapımı HTML5 Canvas'a uygun mu?

Question

Ben şöyle ayrı tuvaline bazı metin oluşturmak için çalışılıyor:

var tmpCanvas = document.createElement("canvas"); 
var tmpContext = tmpCanvas.getContext('2d'); 
tmpContext.textAlign = 'center'; 
tmpContext.font = size + 'px'; 
tmpCanvas.width = tmpContext.measureText(txt).width; 
tmpCanvas.height = size; 
tmpContext.fillStyle = "#000"; 
tmpContext.fillRect(0, 0, tmpCanvas.width, tmpCanvas.height); 
tmpContext.fillStyle = color; 
tmpContext.fillText(txt, tmpCanvas.width/2, tmpCanvas.height/2); 

Bu tuval sonra ana tuvalin merkeze varılır: Bunu yapıyorum

context.drawImage(cachedText, (d_canvas.width/2) - (cachedText.width/2), (d_canvas.height/2) - (cachedText.width/2), cachedText.width, cachedText.height); 

, metin çünkü Bu çizilen oldukça karmaşıktır, bu yüzden çizim işlemini birkaç kez tekrarlamak istemiyorum. Ancak, sorun, kanvas boyutunu metin boyutuna eşit olarak ayarladığım gerçeğine rağmen, metnin tuvalden daha küçük olması ve ortada olmaması. Yukarıda denediğim gibi önceden oluşturulmuş bir metin içeren bir tuval/resim nesnesini nasıl oluşturabilirim? Olarak çıkıyor http://jsfiddle.net/x4t1vjam/

Answer 1

Yani, Kodunuzla ilgili birkaç sorun vardı: Burada

sorunu göstermek için bir keman olduğunu. İlk ve en önemlisi, bir kanvas üzerinde bir yazı tipi boyutu ayarladığınızda, bir yazı tipi de ayarlamanız gerekir - benim örneğimde, bir genel 'serif' yazı tipi olarak ayarlanır.

İkinci olarak, çizim kodunuz garip bir düzende. Bu nedenle, yazı tipi boyutunu ayarlamak için yazı tipi boyutu kullanıldıktan sonra yazı tipini çizmek için kullanılmadan önce geçersiz kılındı.

Son olarak, konumlandırma mantığı yanlış. Düzeltmek için elimden gelenin en iyisini denedim, ancak biraz düzeltmeye ihtiyacım var. Burada çoğunlukla çalışmaktadır;

http://jsfiddle.net/x4t1vjam/5/

kod muhtemelen iki kez ilan önlemek için önceki kodda değişkenlerde değerlerinden bazılarını saklamak, temizlenmiş ihtiyacınız olacağından. Ve bir kod örneği olmadan bir cevap gönderemediğimden, burada değişiklikleri yaptım.

tmpContext.textAlign = 'center'; 
    tmpContext.font = size + "px serif"; 
    tmpCanvas.width = tmpContext.measureText(txt).width; 
    tmpCanvas.height = size; 
    tmpContext.fillStyle = "#000"; 
    tmpContext.fillRect(0, 0, tmpCanvas.width, tmpCanvas.height); 
    tmpContext.fillStyle = color; 
    tmpContext.font = "100px serif"; 
    tmpContext.fillText(txt, (tmpCanvas.width/2) - tmpContext.measureText(txt).width/2, 
         size);