在画布中切换图像

时间:2012-04-18 18:13:01

标签: javascript html5 canvas toggle

这是开始为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);
                }
            });
});

知道为什么吗?谢谢。

1 个答案:

答案 0 :(得分:1)

jsfiddle

你需要在if语句==中创建你的=。

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

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