javascript - 如何将文本设置为 Canvas 圆

Question

我用了this question我创建了像this这样的形状但现在我不知道如何在第一次单击时为每个圆圈设置文本？ (如井字棋)

Answer 1

给你! - 为了方便起见，我合并了它。只需单击圆圈即可查看其上的文字。

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var radius = 70;
var lineWidth = 5;
var cols = 3;
var rows = 2;
var distance = 50;
var circles = [];

//click circle to write
canvas.onclick = function(e) {
    // correct mouse coordinates:
    var rect = canvas.getBoundingClientRect(),  // make x/y relative to canvas
        x = e.clientX - rect.left,
        y = e.clientY - rect.top,
        i = 0, circle;

    // check which circle:
    while(circle = circles[i++]) {
        context.beginPath();  // we build a path to check with, but not to draw
        context.arc(circle.x, circle.y, circle.radius, 0, 2*Math.PI);
        if (context.isPointInPath(x, y) && !circle.clicked) {
          circle.clicked = true;
          context.fillStyle = "blue";
          context.font = "bold 34px Arial";
          context.textAlign="center";
          context.fillText("Yeah", circle.x, circle.y);
          
            break;
        }
    }
};


//draw circles
for (var i = 0; i < rows; i++) {
    for (var j = 0; j < cols; j++) {
        // Draw circle
        var offset = radius * 2 + lineWidth + distance;
        var center = radius + lineWidth;
        var x = j * offset + center;
        var y = i * offset + center;
            
            circles.push({
        id: i + "," + j,    // some ID
        x: x,
        y: y,
        radius: radius,
        clicked:false
    });
        console.log(circles)
        context.beginPath();
        context.arc(x, y, radius, 0, 2 * Math.PI, false);
        context.fillStyle = 'green';
        context.fill();
        context.lineWidth = lineWidth;
        context.strokeStyle = '#003300';
        
        if (j != cols - 1) {
            // Draw horizontal line
            var hLineX = x + radius;
            var hLineY = y;
            context.moveTo(hLineX, hLineY);
            context.lineTo(hLineX + distance + lineWidth, hLineY);
        }
        if (i > 0) {
            // Draw vertical line
            var vLineY = y - radius - distance - lineWidth;
            context.moveTo(x, vLineY);
            context.lineTo(x, vLineY + distance + lineWidth);
        }
        context.stroke();
    }
}

<div id="ways" style="width:1000px;margin:0 auto;height:100%;">
    <canvas id="canvas" width="1000" height="1000"></canvas>
</div>

很高兴为您提供帮助!