mouseOver ImageЗаменить на холсте - PullRequest
Новая
       16

mouseOver ImageЗаменить на холсте

2 голосов
/ 18 августа 2011

Я пытаюсь заменить изображение, добавленное на холст, событием 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>

Новый код: я пытаюсь изменить изображение в холсте с идентификатором 'A' с помощью мыши на холсте 'e'возможность заставить работать мышью и добавить изображение на холст «А», но не удалить его.

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

1 Ответ

4 голосов
/ 18 августа 2011

В вашем коде есть пара синтаксических ошибок и неправильных представлений.Ниже приведен упрощенный рабочий пример.Вы можете поместить обработчики мыши прямо на элемент canvas.Ваша функция loadImage () даже не используется.Я также добавил onmouseout (), чтобы вернуть изображение, хотя я не уверен, что именно так вы и хотели.

...