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

回答

相关问题