畫布用文本填充形狀

Question

我在畫布上有這個例子。 我想知道如何在形狀中添加文本。

我已經研究了繪制形狀的代碼，但不確定如何添加文本。 我可以添加文本，但不能隨球移動嗎？

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 ，這就是您想要的嗎？

PS：使用畫布時，最好始終隨手攜帶HTML5 Canvas Cheat Sheet 。