单击图像时-HTML5，Canvas，Javascript
[英]When image is clicked - HTML5, Canvas, Javascript
问题描述
I want something to happen when the sound image is clicked,ive seen alot about this mouseresponse function but cant seem to get it working. 
我希望单击声音图像时发生一些事情，虽然我对此鼠标响应功能有很多了解，但似乎无法使其正常工作。 Im brand new to this so my code may be a bit disgusting. 我对此是全新的，因此我的代码可能有点令人作呕。
<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>
6 个解决方案
解决方案1
0 2014-04-18 01:41:23
Play is the variable or new object you have defined before, so i think you are calling audio.Play(); 播放是您之前定义的变量或新对象，因此我认为您正在调用audio.Play(); function in the end where audio should have that function available to be called. 最后，音频应具有可调用的功能。 may be you could search for how to add the methods to the objects and make play method available for audio to be called. 可能是您可以搜索如何将方法添加到对象，并使play方法可用于要调用的音频。
解决方案2
0 2014-04-18 01:42:35
Maybe you can add an event listener to 'background', 'logo', 'play', 'sound' and 'audio'. 也许您可以在“背景”，“徽标”，“播放”，“声音”和“音频”中添加事件监听器。 if they have not been loaded, then can't be draw on canvas. 如果尚未加载，则无法在画布上绘制。
解决方案3
0 已采纳 2014-04-18 01:47:44
Create the sound image like so: 像这样创建声音图像：
var sound = document.createElement('img');
sound.src = "sound.png";
Append this new image to the body (of wherever you want): 将此新图像附加到主体（无论您想要的地方）：
document.body.appendChild(sound);
Do something if the image is clicked: 如果单击图像，请执行以下操作：
sound.onclick = function(){
alert('it was clicked!');
}
See a working fiddle here: http://jsfiddle.net/y8th4/ 在此处查看有效的提琴： http : //jsfiddle.net/y8th4/
解决方案4
0 2014-04-18 01:49:11
Since you are using canvas, things might be a bit more difficult. 由于您使用的是画布，因此事情可能会有些困难。 If you are familiar with how canvas works, it doesn't track the position of drawn objects, you have to separately. 如果您熟悉画布的工作方式，那么它不会跟踪绘制对象的位置，您必须单独进行。 If you want the user to be able to to interact with the image, I'd recommend using some jQuery with something that might look like this: 如果您希望用户能够与图像进行交互，我建议您使用一些带有类似以下内容的jQuery：
$(element).attr('id', 'sound')
$(element).css('top',650 + 'px').css('left',5 + 'px');
$('#sound').append($element);
I'd also recommend adding an event listener to the object like so: 我还建议将事件侦听器添加到对象，如下所示：
document.getElementById('sound').addEventListener('click', audio.play());
解决方案5
0 2014-04-18 01:50:44
Ok, so you need to check if the cursor in the area of sound image, you need to add event listener and check if during the click it in the area... 好的，因此您需要检查光标是否在声音图像区域中，您需要添加事件侦听器并检查单击鼠标时是否在该区域中...
Something like that: 像这样：
// 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();
}
});
解决方案6
0 2014-04-18 02:03:36
Please Refer to this for the detail understanding of event Listening 请参考此以了解事件监听的详细信息
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget.addEventListener
This is great! 这很棒！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.