Как очистить определенную строку в Canvas: HTML5

о холсте, "элементах" холста и видимости "элементов"...

когда любой элемент на холсте должен измениться (переместить, стереть и т. д.), стандартный метод-полностью стереть холст и перерисовать холст с элементами в их новых положениях (или не перерисовать элементы, если они стерты).

это потому, что холст не "помнит", где он нарисовал какой-либо отдельный элемент, и поэтому не может индивидуально перемещать или стирать любой элемент.

это до вас, чтобы "помнить" достаточно информации об элементе, чтобы перерисовать его после того, как холст был стерт.

Демо:http://jsfiddle.net/m1erickson/Wrk2e/

таким образом, в вашем примере вы можете создавать объекты javascript a и b чтобы представить ваши пути верхней правой и левой нижней строки.

каждый объект будет иметь точки, которые определяют его путь линии и флаг, указывающий, если он виден (visible = = перерисовать на холсте).

// create an object containing the top-right lines
// the object contains its path points & if it is visible or not
var a={
  path:[10,10, 300,10, 300,300],
  isVisible:false,
}

// create an object containing the left-bottom lines
// the object contains its path points & if it is visible or not
var b={
  path:[10,10, 10,300, 300,300],
  isVisible:false,
}

для удобства обработки вы можете поместить все свои объекты line-path в массив:

// an array containing all the line-path objects
var myObjects=[a,b];

затем, когда вы очищаете холст, вы просто используете информацию о каждом объекте line-path для перерисовки линии. Если флаг видимости определенных объектов false тогда не перерисовывайте этот конкретный объект.

// clear the entire canvas 
// redraw any line-paths that are visible
function redrawAll(myObjects){
    context.clearRect(0,0,canvas.width,canvas.height);
    for(var i=0;i<myObjects.length;i++){
        if(myObjects[i].isVisible){
            drawLinePath(myObjects[i]);
        }
    }
}

// redraw 1 line-path
function drawLinePath(theObject){
    var points=theObject.path;
    // save the current untranslated context state
    context.save();

    // draw lines through each point in the objects path
    context.translate(0.5, 0.5);
    context.beginPath();
    context.setLineDash([2,10]);
    context.moveTo(points[0],points[1]);
    for(var i=2;i<points.length;i+=2){
        context.lineTo(points[i],points[i+1]);
    }
    context.stroke();

    // restore the context to its untranslated state
    context.restore();
}

со всем этим на месте, ваши кнопки просто изменить флаг видимости на конкретном объекте line-path и затем очистите / перерисуйте весь холст.

// use buttons to set & clear the visibility flags on objects
// In all cases, clear the entire canvas and redraw any visible objects

$("#reDrowA").on("click",function(){
    a.isVisible=true;
    redrawAll(myObjects);
});
$("#reDrowB").on("click",function(){
    b.isVisible=true;
    redrawAll(myObjects);
});
$("#clearA").on("click",function(){
    a.isVisible=false;
    redrawAll(myObjects);
});
$("#clearB").on("click",function(){
    b.isVisible=false;
    redrawAll(myObjects);
});