Clean text from canvas shapes

问题

How I clean text from canvas shape ? this my code:

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

and fiddle

回答1:

Just refactor the code a bit -

Extract the lines which draws the circle into a single function which takes one of those circle objects as an argument:

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

Then replace those lines which they came from originally, in the loop with this line (after the circle object has been pushed):

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

Now you can use this function in your click events by modifying the code (here, it toggles text on and off):

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

Just a note with this approach: this will redraw the circles on top of each other. Over time the lines will start to look jaggy due to the added anti-aliasing on the edges. For this reason a full clear of the canvas is better, and then redraw them all. But I'll leave that as an exercise for you.. :-)

来源：https://stackoverflow.com/questions/28886840/clean-text-from-canvas-shapes