点击或帆布上空盘旋多张图片？

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文件“永久” canvas元素（不能与被弄乱）。我一直试图得到它，这样当我点击我会从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”！这里的想法是，你重绘的画布一样，使用相同的功能。每次你修改任何的，你重新呈现它的全部。看看你是否能得到这个例子的工作，这将有助于澄清了很多。如果你不明白什么评论