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在畫布中的多個圖像

回答

相關問題