如何在html畫布中的文本周圍繪制矩形？

Question

我知道我在畫布上讀到了一些有關上升和字體高度的信息，但我根本不了解。

首先，為什么要從右到上繪制文本，而不是像矩形一樣從右到下繪制文本。 我在文檔的任何地方都找不到。 然后，如果我想在一個字母周圍繪制一個矩形，特別是基線以下的“ y”或“ p”，該怎么辦。

我有一個帶有文字的畫布 ，

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

我該怎么做才能在其周圍繪制矩形？

提前致謝！

Answer 1

這是一些在文本周圍繪制矩形的鍵

如果要從左上角對齊文本，則可以設置以下上下文對齊屬性：

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> 

Answer 2

首先，一些誤解：

• ctx.closePath()方法確實關閉仍然打開的Path2D：即ctx.moveTo(10,10); ctx.lineTo(50, 50); ctx.lineTo(30, 50); 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" 。

當前無法獲取畫布中文本的高度，但是您可以使用一些技巧，或者如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") 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>