Question

我有一个CSS背景图像设置到我的画布;这是一张地图。

然后我在地图顶部的各个点上“绘制”红色图钉图像。每个引脚都被绘制为具有不同名称但具有相同源图像的新Image对象。

我希望这些图像引脚是交互式的（onMouseOver / onClick / etc），但是当我尝试执行以下代码时，我没有看到任何事件：

<body>
    <canvas id="backgroundMapCanvas"  width="1177" height="669"></canvas>
</body>

<style type="text/css" media="screen">
    canvas {
        background:url(images/mapBackground2.jpg)
    }
</style>

<script type="text/javascript">
    var canvas = document.getElementById("backgroundMapCanvas");
    var context = canvas.getContext("2d");

    var pinMelbourne = new Image();
    pinMelbourne.src = "images/redPin3.png";
    pinMelbourne.onload = function() {
        context.drawImage(pinMelbourne, 987, 538);
    };

    pinMelbourne.onmouseover = function() {
        alert("test alert box");
    };
</script>

谢谢，

Virat

Answer 1

向canvas元素添加一个事件监听器。

sudo apachectl stop

http://jsfiddle.net/GarryPas/86x4cpyh/2/

x和y代表用户点击的位置，您可以根据这个来决定如何回应。

Answer 2

您必须将事件添加到画布对象，而不是图像。图像在画布上绘制，但实际的图像对象永远不会添加到页面。要检测鼠标是否在画布上的图像上移动，您需要检查边界框。

canvas.addEventListener('movemove', function(e) {
    var x = e.layerX; // x and y coordinated relative to top-left corner of canvas
    var y = e.layerY;
    if (x >= 987 && x < 987 + pinMelbourne.width && y >= 538 && y < 538 + pinMelbourne.height) {
        alert('Mouse over image');
    }
})

我可以使javascript图像对象互动吗？

2 个答案: