JavaScript沒有在畫布上正確繪製文本

在這裏，我想通過這個函數「launch」傳遞一個參數，參數是tntLoader。然而，它通過成功，並執行包括計時器（間隔）功能運行得很好，問題是它不顯示在畫布上的整個文本。它只是顯示一條小線。是的畫布對象正確加載，一切都在html文件中定義好和好。所以它應該是這樣的：launch(tntLoader);。JavaScript沒有在畫布上正確繪製文本

var surface; 
var timer; 
var counter = 0; 

var tntLoader= { 
canvas:"canvas", 
speed:30, 
x:0, 
y:0, 
textSize:16, 
canvasElement:0, /* Do not modify this variable */ 
surface:0, /* Do not modify this variable */ 
font:"Arial", 
color:"#00000", 
text:"Sample Text", 
type:"fill" 
}; 

function launch(feg){ 
    counter=0; 
    feg.canvasElement = document.querySelector(feg.canvas); 
    feg.surface = feg.canvasElement.getContext("2d"); 
    timer = window.setInterval(function(){drawText(feg);},feg.speed); 
} 

function drawText(drawingObject){ 
    if(counter>drawingObject.text.length){ 
     window.clearInterval(timer); 
    } 
    drawingObject.surface.font=drawingObject.textSize+"px "+drawingObject.font; 
    if(drawingObject.type=="fill"){ 
     drawingObject.surface.fillText(drawingObject.text.charAt(counter),drawingObject.x+30*counter,drawingObject.y); 
     counter++; 
    }else{ 
     drawingObject.surface.strokeText(drawingObject.text.charAt(counter),drawingObject.x+30*counter,drawingObject.y); 
     counter++; 
    } 
}

來源

2014-04-29 DaBaws

您可以通過向y位置爲基線補償或基線頂部設定爲例如：

drawingObject.surface.textBaseline = 'top';

文本總是從由y位置來表示其基線繪製。這是常用的方法。

這裏是一個概述不同的基準設置確實對文本的內容：

Baseline overview
^{Image source}

的另一種方式是當然的上升部件添加到您的y位置。儘管在規範中它目前沒有在任何瀏覽器中實現，因此不可能以穩定的方式得到這個值。

你將不得不估計它通過使用例如font-height。這可能導致瀏覽器文本引擎的位置不同，因此如果您需要準確放置文本，那麼第一種方法會更好（暫時）。

fillText(text, x, y + textSize*0.8); // 80% is approx. ascent height

來源

2014-04-29 19:38:45 K3N

JavaScript沒有在畫布上正確繪製文本

回答

相關問題