キャンバス内に複数の画像がある場合は

キャンバスに複数の画像がある場合、mouseOverイベントに少し問題があります。私は、マウスが終わったときに変化する2つの画像を持つ簡単な例を作った。しかし、私はただ1つの画像が変わることを望んでいます、もっと正確には、マウスが完全に終わっている画像です。誰かが私を助けることができますか？ありがとう：キャンバス内に複数の画像がある場合は

<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éUMAsoluçãozinhaRAPIDA、qualquer coisa TE passei MEU NUMERO無FacebookのOUtambémヴォーチェpode criarのDOI objetosキャンバス電子FAZER UMAfunçãogenerica PRA 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>`

出典

2012-03-09 23:12:49

Valeu、アンダーソン* - *Soluçãorápidae simples（：）は、キャンバス地帯の景色を描いています。 –

キャンバス内に複数の画像がある場合は

答えて

関連する問題