如何在HTML畫布中圍繞文本繪製矩形？

Question

我知道我讀過一些關於畫布上的上升和字體高度的東西，但我根本不明白。

首先，爲什麼文本從右到頂繪製而不是像矩形一樣從底部到底部。我無法在文檔的任何位置找到它。然後，如果我想圍繞一個字母繪製一個矩形，特別是'y'或'p'是低於基線的矩形，我該怎麼做。

我有一個canvas with text，

ctx.beginPath(); 
    ctx.fillText('Hello yyyqqqppp', 50, 50); 
    ctx.fillStyle = 'red'; 
    ctx.fill(); 
    ctx.closePath(); 

我該怎麼辦讓周圍繪製的矩形？

在此先感謝！

Answer 1

首先，一些誤解：

• ctx.closePath()方法會關閉一個仍然打開的Path2D：即ctx.moveTo(10,10); ctx.lineTo(50, 50); ctx.lineTo(30, 50);會留下未關閉的路徑。調用closePath（）將爲您創建最後的ctx.lineTo(10,10)。
  ctx.rect()因此總是封閉的路徑，不需要調用此方法。
  ctx.fill()將關閉您的路徑。
  ctx.fillText()不會產生路徑並且已經包含fill()方法，不需要再次調用它。現在

，爲什麼是指定的，而不是文本的頂部基線，這是因爲在默認情況下ctx.textBaseline屬性設置爲"bottom"。如果需要，您可以將其設置爲"top"。

目前沒有辦法獲得畫布中文字的高度，但是您可以使用some tricks或as noted by markE，在px中近似爲1.286 * fontSize。

要獲得文本中某個字母的位置，可以使用ctx.measureText()方法。

因此，對於你的例子，你可以結束與：

var ctx = canvas.getContext('2d'); 
 
// the font size at which we will draw text 
 
var fontSize= 15; 
 
// set it 
 
ctx.font = fontSize+'px Arial'; 
 
// the text position 
 
var x = 50, y=50; 
 
// the string to draw 
 
var str = "Hello yyyqqqppp "; 
 

 
ctx.strokeStyle="red"; 
 

 
// get every characters positions 
 
var chars = []; 
 
for(var i=0; i<str.length;i++) { 
 
    if (str[i] === "y" || str[i] === "p") 
 
    \t chars.push(i); 
 
} 
 
//iterate through the characters list 
 
for(var i=0; i<chars.length; i++){ 
 
    // get the x position of this character 
 
    var xPos = x+ctx.measureText(str.substring(0,chars[i])).width; 
 
    // get the width of this character 
 
    var width = ctx.measureText(str.substring(chars[i],chars[i]+1)).width; 
 
    // get its height through the 1.286 approximation 
 
    var height = fontSize*1.286; 
 
    // get the y position 
 
    var yPos = y-height/1.5 
 
    // draw the rect 
 
    ctx.strokeRect(xPos, yPos, width, height); 
 
    } 
 
// draw our text 
 
ctx.fillText(str, x, y);

<canvas id="canvas"></canvas>

Answer 2

以下是一些關鍵如果你想要的文字，從排列繪製文本週圍

一個矩形的左上角，那麼你可以設置這些方面的取向性：

context.textAlign='left'; // this is the default to align horizontally to the left 
context.textBaseline='top'; // text will be aligned vertically to the top 

你可以使用此上下文方法測量文本的橫向寬度：

// set the font size and font face before measuring 
context.font='14px verdana'; 
var textWidth=context.measureText('Hello').width; 

沒有本地畫布方式確保文字高度，但對於大多數字體和非極端的字體大小，我和你一起工作能得到高度的這樣一個很好的近似：

var lineHeight=fontsizeInPixels * 1.286; 

示例代碼和演示：

// get references to canvas and context 
 
var canvas = document.getElementById("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 

 
var fontsize = 14; 
 
var fontface = 'verdana'; 
 
var lineHeight = fontsize * 1.286; 
 
var text = 'Draw a rectangle around me.'; 
 

 
ctx.font = fontsize + 'px ' + fontface; 
 
var textWidth = ctx.measureText(text).width; 
 

 
ctx.textAlign = 'left'; 
 
ctx.textBaseline = 'top'; 
 

 
ctx.fillText(text, 20, 50); 
 
ctx.strokeRect(20, 50, textWidth, lineHeight);

canvas { 
 
    border: 1px solid red; 
 
}

<canvas id=canvas width=300 height=300></canvas>