mouseOver Image Replaceable in canvas

我正在嘗試用mouseOver事件替換已添加到畫布的圖像。我不認爲我這樣做是正確的。mouseOver Image Replaceable in canvas

<script> 
function loadImage(){ 
    var canvas = document.getElementById("e"); 
    var context = canvas.getContext("2d"); 

    var cat = new Image(); 
    cat.src = "images/paul01.jpg"; 
    cat.onload = function() { 
     context.drawImage(cat, 0, 0, 166, 276); 
    }; 
} 
</script> 
<script> 
function mouseOver(); { 
    var canvas = document.getElementById("e"); 
    var context = canvas.getContext("2d"); 
    var cat = new Image(); 
    cat.src = "images/paul02.jpg"; 
    cat.onload = function() { 
     context.drawImage(cat, 0, 0, 166, 276); 
    }; 
} 
</script> 

<a href=""onmouseover="mouseOver"()> 
<div class="canvas"> 
    <canvas id="e" width="166" height="276"> 
    <p>No Canvas Support in Browser, old fashion image?</p> 
    <img src="images/paul01.jpg"> 
    </canvas> 
</div> 
</a>

新代碼：我試圖改變與鼠標移出畫布「E」我已經能夠得到mousover工作和圖像添加到畫布ID「A」的圖像畫布'A'，但不能刪除它。

<script> 
        function init() { 
            setImageOne(); 
        } 

        function setImageOne() { setImage('images/paul01.jpg'); } 

        <!--function setImageTwo() { setImage('images/paul02.jpg'); }--> 

     function unsetImageOne() { largeImage('images/full/cartoonPaul02.jpg'); } 

     function setImageTwo() { largeImage('images/full/cartoonPaul01.jpg'); } 

        function setImage(src) { 
            var canvas = document.getElementById("l"); 
            var context = canvas.getContext("2d"); 
            if (context == null) return; 
            var img = new Image(); 
            img.src = src; 
            context.drawImage(img, 0, 0, 166, 276); 
     } 

     function largeImage(src){ 
      var canvas = document.getElementById("A"); 
            var context = canvas.getContext("2d"); 
            if (context == null) return; 
            var img = new Image(); 
            img.src = src; 
            context.drawImage(img, 0, 0, 300, 400); 
     } 
</script> 
    <div id="container"> 
     <header> 
     <a href='../../'><h3>Everything else</h3></a> 
     </header> 
     <div id="main" role="main"> 
     <body onload="init()"> 

      <div class="canvas"> 
       <canvas id="l" width="166" height="276" onmouseover="setImageTwo()" onmouseout="unsetImageOne()"></canvas> 
      </div> 

      <div class="canvas"> 
       <canvas id="A" width="300" height="400"></canvas> 
      </div>

來源

2011-08-18 Cool Guy Yo

在代碼中有幾個語法錯誤和誤解。以下是一個簡化的工作示例。您可以將鼠標處理程序放在畫布元素上。你的loadImage（）函數甚至沒有被使用。我還添加了一個onmouseout（）來恢復圖像，但我不確定這是您的預期行爲。

<!doctype html> 
<html> 
    <body> 
    <head> 
     <script> 
     function init() { 
      setImageOne(); 
     } 

     function setImageOne() { setImage('one.jpg'); } 

     function setImageTwo() { setImage('two.jpg'); } 

     function setImage(src) { 
      var canvas = document.getElementById("e"); 
      var context = canvas.getContext("2d"); 
      if (context == null) return; 
      var img = new Image(); 
      img.src = src; 
      context.drawImage(img, 0, 0, 166, 276); 
     } 
     </script> 
    </head> 
    <body onload="init()"> 
    <div> 
     <canvas id="e" width="166" height="276" onmouseover="setImageTwo()" onmouseout="setImageOne()"> 
     <p>No Canvas Support in Browser</p> 
     </canvas> 
    </div> 
    <body> 
</html>

來源

2011-08-18 01:03:36

非常感謝。您是否簡單地推薦任何適合JavaScript的書籍？ –

我更新了一些代碼，現在大部分工作都正在進行中，希望你能繼續給我一隻手。 –

對於Canvas的一個很好的在線參考，請嘗試以下網站：http://html5canvastutorials.com –

mouseOver Image Replaceable in canvas

回答

相關問題