鼠标悬停在画布上的图像替换

发布于 2024-11-30 15:34:05 字数 3113 浏览 0 评论 0原文

我正在尝试使用 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>

新代码：我正在尝试将鼠标移到画布“e”上来更改画布 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>

原文

I am trying to replace a image I have added to a canvas with a mouseOver event. I don't think I am doing this right.

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

New Code:
I am trying to change the image in canvas ID 'A' with mouse out on canvas 'e' I have been able to get the mousover to work and add a image to canvas 'A', but not remove it.

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

山田美奈子 2024-12-07 15:34:05

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

There are a couple syntax errors and misconceptions in your code. Below is a simplified, working example. You can put the mouse handlers right onto the canvas element. Your loadImage() function isn't even used. I also added an onmouseout() to revert the image, although I'm not sure that's your intended behavior.

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

回复收藏 0 原文

~没有更多了~