画布用文字填充形状

Question

我在画布上有this示例。我想知道如何在形状中添加文字。

我已经查看了绘制形状的代码，但并不确定如何添加文本。我能够添加文字，但不会随着球移动？

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：当用帆布玩，它总是最好保持HTML5 Canvas Cheat Sheet得心应手。