Как сделать так, чтобы при нажатии на image ( уже с загруженной картинкой) тот становился невидимым

Question

Нужно чтобы при нажатии на одну из этих картинок, та становилась - невидимой

const cvs = document.getElementById('canvas');
const ctx = cvs.getContext('2d');
const fon = new Image();
const boy = new Image();
const book1 = new Image();
const book2 = new Image();
const flower1 = new Image();
const flower2 = new Image();
const flower3 = new Image();
const meal = new Image();
const paper = new Image();
const pen = new Image();

pen.src='img/pen.gif';
paper.src='img/paper.gif';
meal.src='img/meal.gif';
boy.src='img/boy_stay2.png';
fon.src='img/fon3.jpg';
book1.src='img/books2.gif';
book2.src='img/books.gif';
flower1.src='img/flower1.gif';
flower2.src='img/flower2.gif';
flower3.src='img/flower3.gif';

const Draw=()=>{
    ctx.drawImage(fon, 0, 0);
    ctx.drawImage(boy,350, 170);
    ctx.drawImage(meal,650,0);
    ctx.drawImage(book1, 300,0);
    ctx.drawImage(book2, 720,130);
    ctx.drawImage(flower1, 30,358);
    ctx.drawImage(flower2, 20,100);
    ctx.drawImage(paper, 200,420);
    ctx.drawImage(pen, 350,460);
    ctx.drawImage(flower3, 20,0);
    requestAnimationFrame(Draw);
};

flower3.onload = Draw;

Answer 1

Канвас их "погружает в себя", так что клик будет по канвасу, можно через костыли, но проще сделать так как я написал ниже:

На нативе

const cvs = document.getElementById('notcanvas');
const gif1 = new Image();
const gif2 = new Image();

gif1.src = 'https://i.gifer.com/ZlXo.gif';
gif2.src = 'https://thumbs.gfycat.com/BestGlassButterfly-small.gif';

gif1.onclick =()=>{
    gif1.remove();
}
gif2.onclick =()=>{
    gif2.remove();
}

gif2.onload=()=>{
    cvs.appendChild(gif1);
    cvs.appendChild(gif2);
};

body{
    background:#232323;
}

<div id="notcanvas"></div>

Либо вот, на jquery в несколько строк

const gif1 = `<div id="picture"><img src="https://i.gifer.com/ZlXo.gif"></div>`;
const gif2 = `<div id="picture"><img src="https://thumbs.gfycat.com/BestGlassButterfly-small.gif"></div>`;

$('#notcanvas').append(gif1,gif2);
$('#notcanvas').on('click', '#picture', ({currentTarget})=>{
    $(currentTarget).fadeOut();
});

body{
    background:#232323;
}

div#notcanvas > #picture {
    display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="notcanvas"></div>

БЛОГ НА HUSL

Как сделать так, чтобы при нажатии на image ( уже с загруженной картинкой) тот становился невидимым

Ответы (1 шт):