MouseOver在画布中的多个图像

我在canvas中有多个图像时遇到mouseOver事件的一个小问题。我做了一个简单的例子，其中2个图像在鼠标结束时发生变化。但我只想要一个图像的变化，更确切地说是鼠标定义完成的图像。有人可以帮助我吗？感谢：MouseOver在画布中的多个图像

这是一个基本的代码，我写道：

<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>

来源

2012-03-09 Luciana Cuarelli

爱，陆。 ESSAé乌玛soluçãozinha必达，qualquer coisa TE passei MEU NUMERO没有Facebook的瓯também几句颇得criar的DOI objetos帆布ËFAZER UMAfunçãoGenerica产品PRA pegar OS VALORES depois欧盟Posto的褐： `

<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>`

来源

2012-03-09 23:12:49

Valeu，安德森* - *：Soluçãorápidae simples（： Depois eu quero ver essa de criar dois objetos canvas e fazer umafunçãogenerica pra pegar os valores ^^ – 2012-03-12 11:44:18

MouseOver在画布中的多个图像

回答

相关问题