如何删除onmouseout上的画布图像？答案

【问题标题】：How to remove canvas image on a onmouseout?如何删除onmouseout上的画布图像？
【发布时间】：2011-10-29 22:43:58
【问题描述】：

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

【问题讨论】：

标签： image html5-canvas onmouseout

【解决方案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);
    }
}

【讨论】：