改变画布图像

期望的行为是当文档负载，画布绘制图像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

改变画布图像

回答

相关问题