改變畫布圖像

期望的行爲是當文檔負載，畫布繪製圖像0被點擊無形的div時，畫布繪製圖像1中，在鼠標鬆開或鼠標移開，它將恢復到圖像0改變畫布圖像

我離開了CSS，因爲我得到了這個工作......只需要知道我在做什麼錯誤的JavaScript函數。現在它不顯示任何東西，甚至不顯示第一張圖像。

<!DOCTYPE HTML> 
<html> 
    <head> 
     <script type="text/javascript"> 
     function imgChange(imagePath) 
      var c=document.getElementById("myCanvas"); 
      var ctx=c.getContext("2d"); 
      var img=new Image(); 
      img.onload = function(){ 
      ctx.drawImage(img,0,0); 
      }; 
      img.src=imagePath; <!-- I THINK THIS IS WRONG? 
     </script> 
    </head> 

    <body> 

      <canvas id="myCanvas" width="506" height="319" 
onload="imgChange('0.gif')" style="border:1px solid #c3c3c3;"> 
      Your browser does not support the canvas element. 
      </canvas> 



      <div id="button1" onMouseDown="imgChange('1.gif')" onMouseUp="imgChange('0.gif')" onMouseOut="imgChange('0.gif')"></div> 
      <div id="key2"></div> 




    </body> 

</html>

來源

2012-05-26 3z33etm

你的代碼是缺少一個結束塊

function imgChange(imagePath) { 
      var c=document.getElementById("myCanvas"); 
      var ctx=c.getContext("2d"); 
      var img=new Image(); 
      img.onload = function(){ 
        ctx.drawImage(img,0,0); 
      }; 
      img.src=imagePath; 
}

最後一個「}」缺少

來源

2012-05-26 03:07:12 AlanFoster

第一個也不存在了！ ;） – Mohsen

JavaScript看起來不錯。但你不能點擊在一個不可見的div。讓div可見並嘗試。請注意0。圖片路徑應該位於您的網域中。如果您在本地主機上運行，則可能需要具有本地HTTP服務器。

來源

2012-05-26 02:57:14 Mohsen

我一直點擊可見DIV對於這個問題的最後12次迭代。它沒有設置爲隱身......它只是沒有任何內容。無論如何，相信我的div作品，JavaScript不會。圖像文件坐在旁邊的HTML文件...沒有原產地問題。我已經用CSS做了同樣的事情，現在正在嘗試使用canvas。 – 3z33etm

你正在使用什麼樣的服務器？ – Mohsen

我看到一個語法錯誤，你的函數沒有大括號 – Mohsen

改變畫布圖像

回答

相關問題