單擊或懸停在畫布中的多個圖像上？

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);
            });
            }

但是據我了解，它使兩個jpeg成為“永久”畫布元素（無法弄亂）。 我一直在嘗試獲取它，以便當我單擊時可以從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”！ 這里的想法是您使用相同的功能重新繪制相同的畫布。 每次修改任何內容時，都將其全部重新呈現。 看看是否可以使該示例正常工作，這將有助於弄清很多問題。 如果您聽不懂評論