Question

我如何从画布形状中清除文字？这是我的代码：

<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

使用这种方法只需注意：这会将圆圈重新绘制在彼此之上。随着时间的推移，由于边缘上增加了抗锯齿，线条将开始变得锯齿状。出于这个原因，完全清除画布更好，然后重新绘制它们。但是我会把它作为锻炼给你......： - ）

从画布形状清除文本

1 个答案: