0

キャンバスID「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>
4

1 に答える 1

1

キャンバスから何かを削除することはできません。何かを描いたときにピクセルだけが保存されるからです。したがって、描画後はイメージの概念はなくなります。

ただし、別の画像を描画する前に、キャンバス全体をクリアすることができます。このコードは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);
    }
}
于 2011-08-18T16:13:07.613 に答える