Question

我希望在点击声像时发生一些事情，我已经看到很多关于这个鼠标响应功能，但似乎无法让它工作。我是全新的，所以我的代码可能有点恶心。

<html>
<head>
    <title>Lunchtime Assasin</title>
    <script type="application/javascript" language="javascript">
        window.onload = draw; 

        var background = new Image();
        background.src = "background.png";
        var logo = new Image();
        logo.src = "LOGO.png";
        var play = new Image();
        play.src = "play.png";
        var sound = new Image();
        sound.src = "sound.png";
        var audio = new Audio('music.mp3');

        function draw() {
            var canvas = document.getElementById("canvas1");
            var ctx = canvas.getContext("2d"); 
            ctx.drawImage(background,0,0);
            ctx.drawImage(logo,225,150);
            ctx.drawImage(play,295,300);
            ctx.drawImage(sound,650,5);
            audio.play();
        }

    </script>
    <style>
        body,html{
        margin:0px;
        padding:0px;
        }
    </style>
</head>
<body>
    <div align='center'>
    <canvas id="canvas1" width="700" height="950"></canvas>
    </div>
</body>

Answer 1

Play是你之前定义的变量或新对象，所以我认为你最后调用audio.Play();函数，音频应该可以调用该函数。也许你可以搜索如何将方法添加到对象，并使播放方法可用于调用音频。

Answer 2

也许您可以为“背景”，“徽标”，“播放”，“声音”和“音频”添加事件监听器。如果他们没有被加载，则无法在画布上绘制。

Answer 3

像这样创建声音图像：

var sound = document.createElement('img');
sound.src = "sound.png";

将此新图像附加到正文（您想要的任何位置）：

document.body.appendChild(sound);

点击图片时执行某些操作：

sound.onclick = function(){
    alert('it was clicked!');
}

在这里看到一个工作小提琴： http://jsfiddle.net/y8th4/

Answer 4

由于您使用的是画布，因此事情可能会有点困难。如果您熟悉画布的工作原理，它不会跟踪绘制对象的位置，您必须单独进行。如果您希望用户能够与图像进行交互，我建议您使用一些可能如下所示的jQuery：

$(element).attr('id', 'sound')
$(element).css('top',650 + 'px').css('left',5 + 'px');
$('#sound').append($element);

我还建议为对象添加一个事件监听器，如下所示：

document.getElementById('sound').addEventListener('click', audio.play());

Answer 5

好的，所以你需要检查声像图像区域中的光标，你需要添加事件监听器并检查是否在该区域点击它...

类似的东西：

// add after the draw function code
window.addEventListener('click', function (event) {
    var cursor = {x: event.clientX, y: event.clientY},
        canvas = document.getElementById("canvas1");

    var cPos = {x: canvas.offsetLeft, y: canvas.offsetTop};
    var rPos = {x: cursor.x - canvas.offsetLeft, y: cursor.y -canvas.offsetTop};

    if (rPos.x > 295 && rPos.y > 300 && 
        rPos.x < 295 + sound.clientWidth && rPos.y < 300 + sound.clientHeight) {
        audio.pause();
    }
});

Answer 6

请参阅此内容，了解事件听力的详细信息

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener

这很棒！

单击图像时 - HTML5，Canvas，Javascript

6 个答案: