Question

当我在画布中有多个图像时，我的mouseOver事件有点问题。我做了一个简单的例子，其中2个图像在鼠标结束时发生了变化。但我只希望改变一个图像，更准确地说是鼠标定义的图像。有人可以帮帮我吗？感谢：

这是我写的基本代码：

 <html>
<head>
    <script>
        var images = [{
            a : 'http://images1.wikia.nocookie.net/masseffect/images/thumb/1/18/Morinth002.png/613px-Morinth002.png',
            b : 'http://images.wikia.com/masseffect/images/5/55/Samara_biotics.png'
        }, {
            a : 'http://i.imgur.com/bxopz.jpg',
            b : 'http://1.bp.blogspot.com/-rLy6D22E_MA/TxGhdN4tQOI/AAAAAAAABDY/5daaYdNkLOc/s1600/yvonne4.jpg'
        }]

        //----------------------------------
        //  setImageOne
        //----------------------------------
        /**
         *  Coloca as imagens iniciais no canvas.
         */
        function setImageOne() {
            var canvas = document.getElementById('myCanvas').getContext('2d');
            var image = new Image();
            image.src = images[0].a;
            var image1 = new Image();
            image1.src = images[1].a;

            image.onload = function() {
                canvas.drawImage(image, 0, 0, 300, 250);
                canvas.drawImage(image1, 300, 0, 300, 250);
            };
        }

        //----------------------------------
        // setImageTwo
        //----------------------------------
        /**
         *  Coloca as imagens finais no canvas.
         */
        function setImageTwo() {
            var canvas = document.getElementById('myCanvas').getContext('2d');
            var image = new Image();
            image.src = images[0].b;
            var image1 = new Image();
            image1.src = images[1].b;

            image.onload = function() {
                canvas.drawImage(image, 0, 0, 300, 250);
                canvas.drawImage(image1, 300, 0, 300, 250);
            };
        }
    </script>
</head>
<body onload="setImageOne" onmousedown="return false;">
    <canvas id="myCanvas" width="600" height="250" onmouseover="setImageTwo()" onmouseout="setImageOne()"></canvas>
</body>

Answer 1

Oi，Lu。 essaéumassoluçãozinharápida，qualquer coisa te passei meu numero no Facebookoutambémvocepode criar dois objetos canvas e fazerumafunçãogenericapra pegar os valores depois eu posto aqui： `

<head>
    <script>
        var images = [{
        a : 'http://images1.wikia.nocookie.net/masseffect/images/thumb/1/18/Morinth002.png/613px-Morinth002.png',
        b : 'http://images.wikia.com/masseffect/images/5/55/Samara_biotics.png'
    }, {
        a : 'http://i.imgur.com/bxopz.jpg',
        b : 'http://1.bp.blogspot.com/-rLy6D22E_MA/TxGhdN4tQOI/AAAAAAAABDY/5daaYdNkLOc/s1600/yvonne4.jpg'
    }]


        //----------------------------------
        //  setImageOne
        //----------------------------------
        /**
        *  Coloca as imagens iniciais no canvas.
        */
        function setImageOne() {
            var canvas = document.getElementById('myCanvas').getContext('2d');
            var image = new Image();
            image.src = images[0].a;
            var image1 = new Image();
            image1.src = images[1].a;

            image.onload = function() {
                canvas.drawImage(image, 0, 0, 300, 250);
                canvas.drawImage(image1, 300, 0, 300, 250);
            };
        }

        //----------------------------------
        // setImageTwo
        //----------------------------------
        /**
        *  Coloca as imagens finais no canvas.
        */
        function setImageTwo(x) {
            var canvas = document.getElementById('myCanvas').getContext('2d');
            var image = new Image();
            image.src = images[0].b;
            var image1 = new Image();
            image1.src = images[1].b;
            if(x<301){
                canvas.drawImage(image, 0, 0, 300, 250);
                var image1 = new Image();
                image1.src = images[1].a;
                canvas.drawImage(image1, 300, 0, 300, 250);
            }else{
                var image = new Image();
                image.src = images[0].a;
                canvas.drawImage(image, 0, 0, 300, 250);
                canvas.drawImage(image1, 300, 0, 300, 250);
            }
        }
    </script>
</head>
<body onload="setImageOne" onmousedown="return false;">
    <canvas id="myCanvas" width="600" height="250" onmousemove="setImageTwo(event.pageX)" onmouseout="setImageOne()"></canvas>
</body>`

MouseOver在画布中的多个图像中

1 个答案: