从 canvas 个形状中清除文本

Question

如何从 canvas 形状中清除文本？这是我的代码：

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

和 fiddle

Answer 1

稍微重构一下代码 -

将绘制圆的线提取到一个函数中，该函数将这些圆对象之一作为参数：

function drawCircle(circle) {
    context.beginPath();
    context.arc(circle.x, circle.y, circle.radius, 0, 2 * Math.PI, false);
    context.fillStyle = 'green';
    context.fill();
    context.lineWidth = lineWidth;
    context.strokeStyle = '#003300';
    context.stroke();
}

然后在循环中用这一行替换它们最初来自的那些行（在圆对象被推入之后）：

drawCircle(circles[circles.length-1]);   // draw last added circle

现在您可以通过修改代码在您的点击事件中使用此功能（此处，它会打开和关闭文本）：

if (context.isPointInPath(x, y)) {
    if (circle.clicked) {
        drawCircle(circle);        // now we can reuse this function to clear the text
        circle.clicked = false;
    }
    else {
        circle.clicked = true;
        context.fillStyle = "blue";
        context.font = "bold 34px Arial";
        context.textAlign="center";
        context.fillText("Yeah", circle.x, circle.y);
    }          
    break;
}

Modified fiddle

请注意这种方法：这将重新绘制彼此重叠的圆圈。随着时间的推移，由于在边缘添加了抗锯齿，线条将开始看起来参差不齐。为此，最好完全清除 canvas，然后将它们全部重绘。但我会把它留给你作为练习......:-)

从 canvas 个形状中清除文本

Clean text from canvas shapes

javascript

canvas

html5-canvas