如何删除onmouseout上的画布图像？ [英] How to remove canvas image on a onmouseout?
问题描述
我正在尝试使用画布ID'e'上的mouseout更改画布ID'A'中的图像我已经能够使mousover工作并将图像添加到画布'A'，但不能将其删除。
I am trying to change the image in canvas ID 'A' with mouseout on canvas ID '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>
推荐答案
从画布中删除某些东西是不可能的你绘制的东西，只保存像素。因此，在绘制之后不再存在图像的概念。
Removing something from a canvas is impossible in such that when you draw something, only pixels are saved. There is therefore no concept of an image anymore after drawing.
然而，您可以做的是在绘制另一个图像之前清除整个画布。此代码可能适用于 largeImage 。 smallImage 也是如此。我还建议您使用 image.onload 以确保图像仅在完全加载时绘制。
What you can do, however, is clearing the full canvas before drawing another image. This code might be appropriate for largeImage. The same goes for smallImage. I also advise you to use image.onload to make sure the image is only drawn when it is fully loaded.
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);
}
}
这篇关于如何删除onmouseout上的画布图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
