如何清除Canvas中的特定行：HTML5

Question

我對這個Canvas元素完全陌生。 我能夠在畫布上繪制線條，但不能僅清除特定線條。 整個畫布變成空白。

試過這個： HTML：

<canvas id="cvs" width="400" height="400"></canvas>
<hr />
<input type="submit" id="reDrowA" value="Draw A" />
<input type="submit" id="reDrowB" value="Draw B" />
<hr />
<input type="submit" id="clearA" value="Clear A" />
<input type="submit" id="clearB" value="Clear B" />

腳本

$(document).ready(function(){
    canvas =  document.getElementById("cvs");    
    $("#reDrowA").on("click",function(){
        a = canvas.getContext('2d');
        a.translate(0.5, 0.5);
        a.beginPath();
        a.setLineDash([2,10]);
        a.moveTo(10,10);
        a.lineTo(300,10);
        a.lineTo(300,300);
        a.stroke();
    });
    $("#reDrowB").on("click",function(){
        b = canvas.getContext('2d');
        b.translate(0.5, 0.5);
        b.beginPath();
        b.setLineDash([2,10]);
        b.moveTo(10,10);
        b.lineTo(10,300);
        b.lineTo(300,300);
        b.stroke();
    });
    $("#clearA").on("click",function(){
       a.clearRect(0, 0, canvas.width, canvas.height);
    });
    $("#clearB").on("click",function(){
        b.clearRect(0, 0, canvas.width, canvas.height);
    });

});

小提琴： http ： //jsfiddle.net/8YNvu/

Answer 1

關於Canvas，Canvas'元素'，以及`elements'的可見性......

當畫布上的任何元素需要更改（移動，擦除等）時，標准方法是完全擦除畫布並使用新位置中的元素重繪畫布（或者如果元素被刪除則不重繪元素）。

這是因為畫布不“記住”它繪制任何單個元素的位置，因此無法單獨移動或擦除任何元素。

在畫布被刪除后，您需要“記住”有關要重繪的元素的足夠信息。

演示： http ： //jsfiddle.net/m1erickson/Wrk2e/

因此，在您的示例中，您可以創建javascript對象a和b來表示您的右上角和左下角線路徑。

每個對象都有定義其行路徑的點和一個標志，指示它是否可見（在畫布上可見==重繪）。

// 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,
}

為了便於處理，您可以將所有行路徑對象放在一個數組中：

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

然后，當您清除畫布時，只需使用每個對象的線路徑信息來重繪該線條。 如果特定對象可見性標志為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();
}

完成所有這些后，您的按鈕只需更改特定線路徑對象上的可見性標記，然后清除/重繪整個畫布。

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

Answer 2

畫布是透明的。 acheive in single canvas tag不可能實現。 因為clearRect功能可以根據寬度和高度進行清除。 我們沒有給出清除畫布的確切位置。 試試小提琴。 你使用兩個canvas標簽來實現場景。

小提琴

Answer 3

您只需re-paint the lines清除Canvas后應該保留re-paint the lines 。
也許是這樣的： http ： //jsfiddle.net/8YNvu/10/