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

问题描述

我对这个 Canvas 元素完全陌生.我可以在画布上画线，但不能只清除指定的线.整个画布变成空白.

I am totally new to this Canvas Element. I am able to draw line in canvas, but not able to clear only specif line. Whole canvas become blank.

试过这个: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/

推荐答案

关于 Canvas、Canvas 的元素"和元素"的可见性...

当画布上的任何元素需要更改(移动、擦除等)时，标准方法是完全擦除画布并使用位于新位置的元素重新绘制画布(或者如果元素被擦除则不重新绘制)).

When any element on the canvas needs to change (move, erase, etc), the standard method is to completely erase the canvas and redraw the canvas with the elements in their new positions (or not redraw the elements if they are erased).

那是因为画布不会记住"它在何处绘制任何单个元素，因此无法单独移动或擦除任何元素.

That's because canvas does not "remember" where it drew any individual element and therefore cannot individually move or erase any element.

在画布被擦除后，您需要记住"有关元素的足够信息以重新绘制它.

It's up to you to "remember" enough information about an element to redraw it after the canvas has been erased.

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

因此，在您的示例中，您可以创建 javascript 对象 a 和 b 来表示您的右上角和左下线路径.

So in your example you could create javascript objects a and b to represent your top-right and left-bottom line paths.

每个对象都有定义其线路径的点和一个标志，指示它是否可见(可见 == 在画布上重绘).

Each object would have the points which define its line-path and a flag indicating if it is visible (visible == redrawn on the canvas).

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

为了便于处理，您可以将所有线路径对象放在一个数组中:

For easy processing you can put all your line-path objects in an array:

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

然后当您清除画布时，您只需使用每个对象的线路径信息来重新绘制线.如果特定对象的可见性标志为 false，则不要重绘该特定对象.

Then when you clear the canvas you simply use each objects line-path information to redraw the line. If a particular objects visibility flag is false then don't redraw that particular object.

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

有了所有这些，您的按钮只需更改特定线路径对象上的可见性标志，然后清除/重绘整个画布.

With all this in place, your buttons simply change the visibility flag on a particular line-path object and then clear/redraw the entire canvas.

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

这篇关于如何清除 Canvas 中的特定行:HTML5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！