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时，您可以将其精确地放置在圆心的位置，并且它将在整个棋盘中居中。

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

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();

＆＃13;

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

＆＃13;

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

Answer 2

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

＆＃13;

fillText

＆＃13;

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();

＆＃13;

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

＆＃13;

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);

HTML Canvas：文本不会出现在圆心

4 个答案: