javascript - Canvas 用文本填充形状

Question

我有this Canvas 中的示例。我想知道如何在形状中添加文本。

我已经研究了绘制形状的代码，但不太确定如何添加文本。我可以添加文本，但它不随球移动？

function draw()
            {
                context.clearRect(0, 0, stageWidth, stageHeight);
                var i = balls.length;
                while(--i > -1)
                {
                    context.fillStyle = balls[i].color;
                    context.beginPath();
                    context.arc(balls[i].x,balls[i].y,balls[i].size,0,Math.PI*2,true);
                    context.closePath();
                    context.fill();
                }
            }

Answer 1

您只需使用球的 x 和 y 值来确保文本跟随球，并使用 textAlign 和 textBaseline 轻松对齐文本。

function draw()
{
    context.clearRect(0, 0, stageWidth, stageHeight);
    // Align once an for all.
    context.textAlign = 'center'; // Set text align to center.
    context.textBaseline = 'middle'; // Set text vertical align to middle.
    var i = balls.length;
    while(--i > -1)
    {
        context.fillStyle = balls[i].color;
        context.beginPath();
        context.arc(balls[i].x,balls[i].y,balls[i].size,0,Math.PI*2,true);
        context.closePath();
        context.fill();
        // Easier to see the text.
        context.fillStyle = 'black';
        // Draw text `Ball # i` centered at position (x, y),
        // with the width of the text equal to ball's size * 2.
        context.fillText('Ball #' + i, balls[i].x ,balls[i].y, balls[i].size * 2);
    }
}

查看更改后的jsfiddle ，这是你想要的吗？

P.S:在使用 Canvas 时，最好保留 HTML5 Canvas Cheat Sheet方便。