Question

如何在篮子中间制作文字？我已经尝试过了，但是文字不在中间。 image here

function draw() {
    ctx.drawImage(backgroundImage, 0, 0);
    ctx.drawImage(basket1, 200, canvas.height - (basket1.height + 50));
    ctx.drawImage(basket2, canvas.width - basket2.width - 200, canvas.height - (basket1.height + 50))
    ctx.drawImage(basket3, canvas.width / 2 - basket3.width / 2, canvas.height - (basket1.height + 50));

    ctx.font = '24px serif';
    ctx.fillText(score_basket_1, basket1.width / 2 + 200, canvas.height - (basket2.height));

    update();
}

function update() {
    requestAnimationFrame(draw);
}

谢谢！

Answer 1

您应该特别注意CanvasRenderingContext2D.textAlign：

ctx.textAlign = 'center'

您可能还对CanvasRenderingContext2D.textBaseline感兴趣，该https://www.ditto.com/在垂直轴上执行类似的任务：

ctx.textBaseline = 'middle'

图像中间的画布文本

1 个答案: