画布：在填充矩形顶部绘制线条

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。