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成为永久性的＆＃34;画布元素（无法搞砸）。我一直试图得到它，以便当我点击时我会从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)
});

确保替换＆＃34; clickedLamp＆＃34;和＆＃34;＃canvas＆＃34;！这里的想法是你使用相同的功能重绘相同的画布。每当你修改它中的任何一个时，你都会重新渲染它。看看你是否可以使这个例子有效，这将有助于澄清很多。如果你不理解某些评论

单击或将鼠标悬停在画布中的多个图像上？

1 个答案: