HTML Canvas：文本不出现在圆的中心

Question

我试图在用 HTML Canvas 绘制的圆圈的中间插入一个文本，但它总是出现在中心上方一点。 （我尝试了基线，但没有奏效）。 我不想硬编码fillText坐标。

 var canvas = document.getElementById('completionStatus'); var context = canvas.getContext('2d'); var centerX = canvas.width / 2; var centerY = canvas.height / 2; var radius = 200; context.beginPath(); context.fillStyle = '#B8D9FE'; context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); context.fill(); context.strokeStyle = '#ffffff'; context.font = 'bold 130pt Calibri'; context.textAlign = 'center'; context.fillStyle = 'white'; context.fillText('70%', centerX, centerY); context.stroke();

 <canvas id="completionStatus" width="400" height="400"></canvas>

这是一个小提琴：http: //jsfiddle.net/wku0j922/2/

Answer 1

只需在上下文中使用textBaseline属性。 当textBaseline设置为middle并且textAlign设置为center时，您可以将它准确地放置在圆心的位置，它将在整个板上居中。

 var c1 = document.getElementById('c1'); var c2 = document.getElementById('c2'); var ct1 = c1.getContext('2d'); var ct2 = c2.getContext('2d'); c1.width = c2.width = 200; c1.height = c2.height = 200; ct1.font = ct2.font = '20px Helvetica'; ct1.textAlign = ct2.textAlign = 'center'; ct2.textBaseline = 'middle'; ct1.beginPath(); ct1.arc(100,100,99,0,Math.PI * 2); ct1.stroke(); ct1.closePath(); ct2.beginPath(); ct2.arc(100,100,99,0,Math.PI * 2); ct2.stroke(); ct2.closePath(); ct1.fillText('textBaseline not set', 100, 100); ct2.fillText('textBaseline middle', 100, 100);

 <canvas id="c1"></canvas> <canvas id="c2"></canvas>

这是在您的代码段中实现的：

 var canvas = document.getElementById('completionStatus'); var context = canvas.getContext('2d'); var centerX = canvas.width / 2; var centerY = canvas.height / 2; var radius = 200; context.beginPath(); context.fillStyle = '#B8D9FE'; context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); context.fill(); context.strokeStyle = '#ffffff'; context.font = 'bold 130pt Calibri'; context.textAlign = 'center'; context.textBaseline = 'middle'; context.fillStyle = 'white'; context.fillText('70%', centerX, centerY); context.stroke();

 <canvas id="completionStatus" width="400" height="400"></canvas>

文档： https ://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textBaseline

Answer 2

在定义textBaseline之前声明fillText似乎有效。

 var canvas = document.getElementById('completionStatus'); var context = canvas.getContext('2d'); var centerX = canvas.width / 2; var centerY = canvas.height / 2; var radius = 200; context.beginPath(); context.fillStyle = '#B8D9FE'; context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); context.fill(); context.strokeStyle = '#ffffff'; context.font = 'bold 130pt Calibri'; context.textAlign = 'center'; context.fillStyle = 'white'; // Defining the `textBaseline`… context.textBaseline = "middle"; context.fillText('70%', centerX, centerY); context.stroke();

 #completionStatus { border: 1px solid #000; }

 <canvas id="completionStatus" width="500" height="500"></canvas>

Answer 3

Canvas 将文本基线置于垂直中心。

要真正使文本居中，您需要补偿字体大小：

context.font = 'bold ' + radius + 'px Calibri';
context.fillText('70%', centerX, centerY + Math.floor(radius/4));

Answer 4

我将 centerY 属性更改为 300，它似乎有效。

context.fillText('70%', centerX, 300);