如何在画布中实现英雄选择？

Question

我有英雄画布。如何选择它并打开上下文菜单？

我可能只将侦听器添加到canvas中，但是类Image不包含此方法。

简单代码：

context.drawImage(hero, heroX, heroY);
context.globalCompositeOperation = "destination-in";
context.drawImage(mask, heroX, heroY);
context.globalCompositeOperation = "destination-over";

function getElementPosition(obj) {
    var curleft = 0,
        curtop = 0;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
        return {
            x: curleft,
            y: curtop
        };
    }
    return undefined;
}

canvas.addEventListener('mousemove', function(evt) {
    var mousePos = getMousePos(canvas, evt);
    var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
    var elementPos = getElementPosition(hero); //doesn't work
    alert(elementPos.x);
}, false);

Answer 1

您需要存储英雄的坐标并在mousemove回调中检查它们。 offsetLeft和offsetTop适用于DOM元素，而不适用于画布上绘制的像素。

无法从您提供的代码中获得更准确的答案。 heroX和heroY 看起来就像你应该使用的东西一样但是再一次，如果没有看到它们是什么，就无法分辨。