javascript - Canvas :在填充矩形顶部绘制线条

Question

我这里有一个函数，应该在中间绘制一个正方形和一个加号，然后如果鼠标悬停在它上面则反转颜色。如果鼠标不在顶部，它可以正常工作，但是一旦被填充，加号就会消失。我认为它被掩盖了。

function drawAdd(cx, cy, btnW, btnH, mouse)
{
    var getID = document.getElementById("canvas_1");
    var color = "black";
    var px = cx + btnW/2;
    var py = cy + btnH/2;

    if (getID.getContext)
    {
        var ctx = getID.getContext("2d");

        ctx.clearRect(cx, cy, btnW, btnH);
        ctx.lineWidth = "10";
        ctx.fillStyle = "black";

        if(mouse)
        {
            ctx.fillRect(cx, cy, btnW, btnH);
            color = "white";
        }
        else
        {
            ctx.strokeRect(cx, cy, btnW, btnH);
        }

        ctx.beginPath();
        ctx.lineWidth = "20";
        ctx.fillStyle = color;
        ctx.moveTo(px - 40, py);
        ctx.lineTo(px + 40, py);
        ctx.moveTo(px, py - 40);
        ctx.lineTo(px, py + 40);
        ctx.stroke();
        ctx.closePath();
    }
}

我在这里做错了什么？

Answer 1

您需要将 ctx.fillStyle = color 替换为 ctx. StrokeStyle = color，因为线条颜色是由 strokeStyle 设置的，而不是 fillStyle。

这是一个工作 JSFiddle .