帶有jCanvas的HTML5 Canvas：如何刪除圖層

Question

我正在使用jCanvas構建HTML5應用程序，我需要刪除一層，即畫布上的黑色圓圈，您可以在此處查看代碼。

var cvLingualWidth = 945;
var cvLingualHeight = 100;

var cvLingual = document.getElementById("cvLingual");

function drawGrid() {
    var contextLingual = cvLingual.getContext("2d");

    for (var y = 0.5; y < cvLingualHeight; y += 6) {
        contextLingual.moveTo(0, y);
        contextLingual.lineTo(cvLingualWidth, y);
    }

    contextLingual.strokeStyle = "#DDD";
    contextLingual.stroke();
}

function drawCircle() {
    $("#cvLingual").drawArc({
        layer: true,
        name: "circleLayer_18",
        strokeStyle: "#000",
        strokeWidth: 2,
        x: 42,
        y: 70,
        radius: 8
    });
}

function clearCircle() {
    var circleLayer = $("#cvLingual").getLayer("circleLayer_18");
    // TODO
}

$(function () {
    drawGrid();
    drawCircle();
    $("#clear").click(function(){
        clearCircle();
    });
})

我嘗試了removeLayer（），但無法正常工作。 如果我清除畫布，則整個UI都將消失。

如何清除圓圈而不影響背景網格線？

Answer 1

根據removeLayer()文檔 ， removeLayer()方法不會自動更新畫布。 之后，您將需要使用drawLayers()方法執行此操作。

$("#cvLingual").removeLayer("myLayer").drawLayers();

但是 ， drawLayers()方法通過清除畫布並重新繪制所有jCanvas層來工作，這意味着網格線將消失。 要解決此問題，請使用jCanvas的drawLine()方法繪制網格線，如下所示：

$canvas.drawLine({
    layer: true,
    strokeStyle: "#DDD",
    strokeWidth: 1,
    x1: 0, y1: y,
    x2: cvLingualWidth, y2: y
});

附帶說明一下，如果您打算稍后（ 在刪除圓之后 ）再次繪制圓，則建議將圖層的visible屬性臨時設置為false 。 然后，當您准備再次顯示該圓圈時，請將其visible屬性設置為true 。 請注意，在這兩種情況下，您都需要調用drawLayers()來更新畫布。

隱藏圈子：

$("#cvLingual").setLayer({
    visible: false
}).drawLayers();

再次顯示圈子：

$("#cvLingual").setLayer({
    visible: true
}).drawLayers();

最后，為方便起見，我已分叉您的小提琴並實施了上述建議。