javascript - 在圆圈下方绘制文字

Question

我正在使用 html5 canvas 和 js 画一个圆圈。

var canvas = document.getElementById(key);
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 35;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'red';
context.fill();
context.stroke();

我还想在其下方绘制文本。我试过这个:

    context.closePath();
    context.fill();
    context.fillStyle = "black";
    context.font = "bold 11";
    context.textBaseline = "top";
    context.fillText('Hello', 100-radius/4 ,100-radius/2); 

但由于某种原因，它被绘制在右下 Angular ，而我想要正好在圆圈下方。

Answer 1

将 textAlign 设置为居中，然后将半径添加到 y 位置:

var spacing = 5;
context.textAlign = "center";
context.textBaseline = "top";
context.fillText('Hello', centerX, centerY + radius + spacing);