Нажатие или зависание над несколькими изображениями на холсте?

Question

Я действительно плохо знаком с холстом и работаю над проектом для моего класса программирования. По сути, я хотел бы иметь холст с фоновым элементом (скажем, room.jpg), а затем, возможно, три интерактивных объекта в комнате (lamp.jpg, couch.jpg, desk.jpg). Я бы хотел, чтобы, если вы наведете курсор на лампу, всплыло маленькое окошко или текст, дающий вам некоторую информацию. Или, может быть, если вы нажмете на изображение, то же самое произойдет. Вы знаете, что-то интерактивное с объектами на холсте. Опять же, я новичок в холсте, но мы должны использовать его в нашем задании. Я пробовал несколько кодов и задавал много вопросов, так что, пожалуйста, держитесь со мной. Мой текущий код:

function loadImages(sources, callback) {
            var images = {};
            var loadedImages = 0;
            var numImages = 0;
            // get num of sources
            for(var src in sources) {
                numImages++;
                }
            for(var src in sources) {
                images[src] = new Image();
                images[src].onload = function() {
                if(++loadedImages >= numImages) {
                callback(images);
                    }
                };
            images[src].src = sources[src];
                }
            }

            var sources = {
            room: 'room.jpg',
            title: 'title.jpg'
            };

            loadImages(sources, function(images) {
            context.drawImage(images.room, 0,0);
            context.drawImage(images.title, 0,0);
            });
            }

Но из того, что я понимаю, это делает эти два jpegs "постоянным" элементом холста (не может быть перепутан). Я пытался сделать так, чтобы, когда я нажал, я перешел из title.jpg в room.jpg, но с тех пор я сдался. По сути, все, что я хочу сейчас, - это чтобы файл room.jpg появлялся при первой загрузке страницы и имел три других объекта png сверху (как объекты в комнате). Могут ли они взаимодействовать или я должен поместить изображения на холст другим способом? Спасибо за вашу помощь и терпение!

Answer 1

// --- Image Loader ----
var images = {};
var loadedImages = 0;
var pictures = {
    room: 'room.jpg',
    title: 'title.jpg'
    lamp1: 'lampoff.jpg'
    lamp2: 'lampon.jpg'
};
function loadImages(sources, callback) {
    var numImages = 0;
    for(var src in sources)numImages++;

    for(var src in sources) {
        images[src] = new Image();
        images[src].onload = function() {
            if(++loadedImages >= numImages) {
                callback(images);
            }
        };
        images[src].src = sources[src];
    }
}



// --- Mouse Down Functionality ----
$('#canvas').addEventListener('mouseDown', function(e){
    if(e.clientX){
        var rect = this.getBoundingClientRect();
        if(rect)            clickCanvas(e.clientX - rect.left, e.clientY - rect.top)
        else                clickCanvas(e.clientX  - this.offsetLeft, e.clientY - this.offsetTop);
    }else if(e.offsetX)     clickCanvas(e.offsetX, e.offsetY);
    else if(e.layerX)       clickCanvas(e.layerX, e.layerY);
    else console.warn("Couldn't Determine Mouse Coordinates");
})


var lampOn;

function drawCanvas(showLamp){
    lampOn = showLamp;
    canvas.width = canvas.width //clears canvas
    context.drawImage(images.room, 0,0);
    context.drawImage(images.title, 0,0);
    if(lampOn){ 
        context.drawImage(images.lamp2, 100,100);
    }else{
        context.drawImage(images.lamp1, 100,100);
    }
}   

function clickCanvas(x,y){
    console.log('clicked canvas at:',x,y)
    if(clickedLamp){
        drawCanvas(!lampOn)
    }
}

loadImages(pictures, function(images) {
    drawCanvas(false)
});

Обязательно замените "clickedLamp" и "#canvas"! Идея в том, что вы перерисовываете тот же холст, используя ту же функцию. Каждый раз, когда вы изменяете что-либо из этого, вы перерисовываете ВСЕ это. Посмотрите, сможете ли вы заставить этот пример работать, это поможет прояснить многое. Если вы что-то не понимаете, прокомментируйте