Как удалить изображение холста на onmouseout? - PullRequest
Новая
       12

Как удалить изображение холста на onmouseout?

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

Я пытаюсь изменить изображение в холсте с идентификатором 'A' с помощью мыши на холсте с идентификатором 'e' Мне удалось заставить работать мышью и добавить изображение на холст '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>

1 Ответ

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

Удаление чего-либо с холста невозможно, так как при рисовании сохраняются только пиксели. Поэтому после рисования больше нет понятия изображения.

Однако вы можете очистить весь холст перед рисованием другого изображения. Этот код может быть подходящим для largeImage. То же самое касается smallImage. Я также советую вам использовать image.onload, чтобы убедиться, что изображение рисуется только после полной загрузки. 

function largeImage(src){
    var canvas = document.getElementById("A");
    var context = canvas.getContext("2d");
    var canvas2 = document.getElementById("l");
    var context2 = canvas.getContext("2d");
    if (context == null) return;
    var img = new Image();
    img.src = src;
    context2.clearRect(0, 0, 166, 276);
    img.onload = function() {
        context.drawImage(img, 0, 0, 300, 400);
    }
}
...