畫布用文字填充形狀

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得心應手。