javascript - 在画布中切换图像

Question

这是为 Uni 做作业的开始。但是现在我很难在图像之间切换。这意味着开始转身比赛游戏。它假设是图像和文字并匹配它们，但到目前为止我对这个切换功能有问题。到目前为止我有这个代码：

        var myButton = new Image();
        var mouseX = 0;
        var mouseY = 0;
        var backgroundImage = new Image();
        var nothing = "num/w/2.png";
        var something = "num/w/3.png";

        function drawButton(buttonObj)
        {
            canvasContext.drawImage(buttonObj, buttonObj.x, buttonObj.y);
        }

        function checkIfInsideButtonCoordinates(buttonObj, mouseX, mouseY)
        {
            if(((mouseX > buttonObj.x) && (mouseX < (buttonObj.x + buttonObj.width))) && ((mouseY > buttonObj.y) && (mouseY < (buttonObj.y + buttonObj.height))))
                {return true;}
            else
                {return false;}
        }

        $(function() {
            var canvas = $("#canvas").get(0);
            canvasContext = canvas.getContext('2d');
            backgroundImage.src = "num/back.jpg";

            $(backgroundImage).load(function() {
                canvasContext.drawImage(backgroundImage, 0, 0);
                myButton.x = 100;
                myButton.y = 100;
                myButton.width = 100;
                myButton.height = 100;
                myButton.src = something;
                drawButton(myButton);
            });

            $("#canvas").click(function(eventObject) {
                mouseX = eventObject.pageX - this.offsetLeft;
                mouseY = eventObject.pageY - this.offsetTop;

                if(checkIfInsideButtonCoordinates(myButton, mouseX, mouseY))
                {
                    if(myButton.src = something)
                    {
                    myButton.src = nothing;
                    }

                    else if(myButton.src = nothing)
                    {
                    myButton.src = something;
                    }

                    drawButton(myButton);
                }
            });
});

知道为什么吗？谢谢。

Answer 1

jsfiddle

您需要在 if 语句中设置 ==。

if (myButton.src == something) {
            myButton.src = nothing;
        }

        else if (myButton.src == nothing) {
            myButton.src = something;
        }