jCanvas 的 clearCanvas 似乎不适用于图层

Question

我已将我的 jCanvas 代码组织成一个在 window.resize 上触发的渲染方法：

<script type="text/javascript">
    var middleX;
    var middleY;
    var canvas;
    var ctx;

    var isLoaded = false;

    $(document).ready
    (
        function ()
        {
            init();
            isLoaded = true;

            render();

            $("canvas").fadeIn(2000);
        }
    );

    function scaleToWindowDimensions()
    {
        ctx.canvas.width = window.innerWidth;
        ctx.canvas.height = window.innerHeight;

        middleX = $canvas.width() / 2;
        middleY = $canvas.height() / 2;
    }

    function init()
    {
        $canvas = $('canvas');
        ctx = document.getElementById("canvas").getContext("2d");

        scaleToWindowDimensions();
    }

    $(window).resize
    (
        function ()
        {
            scaleToWindowDimensions();

            render();
        }
    );

    function render()
    {
        if (!isLoaded)
        {
            return;
        }

        $canvas.clearCanvas();

        // ctx.clearRect(0, 0, $canvas.width(), $canvas.height());

        $canvas.addLayer({
            method: 'drawArc',
            strokeStyle: "#000",
            strokeWidth: 1,
            fillStyle: '#c33',
            x: middleX,
            y: middleY,
            closed: true,
            radius: 50,
            // Event bindings
            mousedown: function (target)
            {
                alert('You pushed RED!');
            },
            mouseup: function (target)
            {
                target.fillStyle = '#c33';
            },
            mouseover: function (target)
            {
                target.fillStyle = "#888";
            },
            mouseout: function (target)
            {
                target.fillStyle = "#c33";
            }
        });

        $canvas.addLayer({
            method: "drawText",
            strokeStyle: "#000",
            fromCenter: true,
            strokeWidth: 1,
            fillStyle: "#333",
            fontSize: "18pt",
            fontFamily: "Verdana",
            x: middleX,
            y: middleY,
            text: "Man",
            data: { "id": 1, "word": "Man" },
            mousedown: function (target)
            {
                alert($(this).id);
            }
        });

        $canvas.addLayer({
            method: 'drawArc',
            strokeStyle: "#000",
            strokeWidth: 1,
            fillStyle: '#d88',
            x: 500,
            y: 100,
            closed: true,
            radius: 40,
            // Event bindings
            mousedown: function (target)
            {
                alert('You pushed RED!');
                target.fillStyle = '#333';
            },
            mouseup: function (target)
            {
                target.fillStyle = '#d88';
            },
            mouseover: function (target)
            {
                target.fillStyle = "#888";
            },
            mouseout: function (target)
            {
                target.fillStyle = "#d88";
            }
        });

        $canvas.addLayer({
            method: "drawText",
            strokeStyle: "#000",
            fromCenter: true,
            strokeWidth: 1,
            fillStyle: "#333",
            fontSize: "16pt",
            fontFamily: "Verdana",
            x: 500,
            y: 100,
            text: "Men",
            data: { "id": 2, "word": "Men" },
            mousedown: function (target)
            {
                alert($(this).id);
            }
        });

        $canvas.addLayer({
            method: 'drawLine',
            strokeStyle: "#222",
            strokeWidth: 1,
            x1: middleX,
            y1: middleY,
            x2: 500,
            y2: 100,
            radius: 40,
        });

        $canvas.drawLayers();
    }
</script>

这绘制了这个图像：

意图是调用render清除整个画布的第一步：

$canvas.clearCanvas();

// ctx.clearRect(0, 0, $canvas.width(), $canvas.height());

这是清除画布的两次单独尝试，但都不起作用。没有清除画布，结果是这样的：

我有一个普遍的想法，这与图层有关，而不是直接绘制，但我很困惑为什么画布没有被清除......

TIA。

Answer 1

clearCanvas 正在按预期工作，这里的问题是您在每次调用render 时向$canvas 添加五个层。所以，当drawLayers被调用时，所有添加到$canvas的层都会被绘制；五个更新的层以及在之前的render 调用中添加的所有层。

解决此问题的一种方法是仅使用setLayer 更改render 方法中的层，并将它们添加到仅调用一次的方法中，可能是init。

所以，init 变为：

function init() {
    $canvas = $('canvas');
    ctx = document.getElementById("canvas").getContext("2d");

    scaleToWindowDimensions();

    console.log($canvas);

    //Adding layers in init
    //and defining all the 
    //static properties which
    //won't change on each render
    $canvas.addLayer({
        name: "l0",                  //Unique name for access
        visible: true,
        method: 'drawArc',
        strokeStyle: "#000",
        strokeWidth: 1,
        fillStyle: '#c33',
        x: middleX,
        y: middleY,
        closed: true,
        radius: 50,
        // Event bindings
        mousedown: function (target) {
            alert('You pushed RED!');
        },
        mouseup: function (target) {
            target.fillStyle = '#c33';
        },
        mouseover: function (target) {
            target.fillStyle = "#888";
        },
        mouseout: function (target) {
            target.fillStyle = "#c33";
        }
    })
        .addLayer({
        name: "l1",                  //Unique name for access               
        visible: true,
        method: "drawText",
        strokeStyle: "#000",
        fromCenter: true,
        strokeWidth: 1,
        fillStyle: "#333",
        fontSize: "18pt",
        fontFamily: "Verdana",
        x: middleX,
        y: middleY,
        text: "Man",
        data: {
            "id": 1,
            "word": "Man"
        },
        mousedown: function (target) {
            alert($(this).id);
        }
    })
        .addLayer({
        name: "l2",                  //Unique name for access
        visible: true,
        method: 'drawArc',
        strokeStyle: "#000",
        strokeWidth: 1,
        fillStyle: '#d88',
        x: 500,
        y: 100,
        closed: true,
        radius: 40,
        // Event bindings
        mousedown: function (target) {
            alert('You pushed RED!');
            target.fillStyle = '#333';
        },
        mouseup: function (target) {
            target.fillStyle = '#d88';
        },
        mouseover: function (target) {
            target.fillStyle = "#888";
        },
        mouseout: function (target) {
            target.fillStyle = "#d88";
        }
    })
        .addLayer({
        name: "l3",                  //Unique name for access
        visible: true,
        method: "drawText",
        strokeStyle: "#000",
        fromCenter: true,
        strokeWidth: 1,
        fillStyle: "#333",
        fontSize: "16pt",
        fontFamily: "Verdana",
        x: 500,
        y: 100,
        text: "Men",
        data: {
            "id": 2,
            "word": "Men"
        },
        mousedown: function (target) {
            alert($(this).id);
        }
    })
        .addLayer({
        name: "l4",                  //Unique name for access
        visible: true,
        method: 'drawLine',
        strokeStyle: "#222",
        strokeWidth: 1,
        x1: middleX,
        y1: middleY,
        x2: 500,
        y2: 100,
        radius: 40,
    });
}

而render 变为：

function render() {
    if (!isLoaded) {
        return;
    }

    $canvas.clearCanvas();

    // ctx.clearRect(0, 0, $canvas.width(), $canvas.height());

    //Here, use setLayer to change
    //properties which are supposed to change
    //with render

    //We use the unique name of each layer
    //set in init to access them.
    $canvas.setLayer("l0", {
        x: middleX,
        y: middleY,
    });

    $canvas.setLayer("l1", {
        x: middleX,
        y: middleY
    });

    //Layer l2 and l3 don't
    //change anything, so they are
    //not changed with render.

    $canvas.setLayer("l4", {
        x1: middleX,
        y1: middleY
    });

    $canvas.drawLayers();
}

Working Example.