清除画布形状中的文本

Clean text from canvas shapes

本文关键字：文本 布形状 清除      更新时间：2023-09-26

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

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

和小提琴

只需稍微重构代码-

将画圆的线提取到一个函数中，该函数将其中一个圆对象作为参数：

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;
}

改良小提琴

这种方法只需要注意一点：这将重新绘制一个接一个的圆圈。随着时间的推移，由于在边缘添加了抗锯齿，线条将开始看起来锯齿状。出于这个原因，最好是完全清除画布，然后重新绘制所有画布。但我将把它留给你练习…：-）

相关文章：