Question

我正在尝试使用mouseOver事件替换我添加到画布的图像。我不认为我这样做是对的。

<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>

新守则：我试图在画布ID'A'上用鼠标在画布'e'上更改图像我已经能够让mousover工作并将图像添加到画布'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>

Answer 1

您的代码中存在一些语法错误和误解。下面是一个简化的工作示例。您可以将鼠标处理程序放在画布元素上。甚至没有使用你的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>

mouseOver在画布中的ImageReplace

1 个答案: