编辑问题和代码:如果我现在在函数move_background()中使用return语句并按照建议将图像保存在var imageObj中,我的代码仍然无效并且在图像内外都播放声音2(声音3是在外面的画布上正确播放了),任何想法为什么?
</script>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid white;" onclick="myFunct()"></canvas>
<!-- audio source is specified later-->
<audio id="audio"></audio>
<style>
#myCanvas { position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin:auto; }
</style>
<script>
var canvas=document.getElementById("myCanvas");
context = canvas.getContext('2d');
var imageObj = make_background();
function make_background()
{
img = new Image();;
img.src="img.gif";
img.id = "myImage";
img.onload = function(){
context.drawImage(img, (canvas.width-img.width)/2, (canvas.height-img.height)/2);
}
return img
}
function play(){
var audio = document.getElementById("audio");
audio.play();
}
function myFunct() {
var audio = document.getElementById("audio");
// PLAY DIFFERENT SOUND IF ANSWER IS RIGHT OR WRONG
document.addEventListener("click", function(e){
if(e.target == imageObj){ // inside canvas and inside image
audio.src = "sound1.mp3";
audio.play();
}
else if (e.target === canvas && e.target !== imageObj) { // inside canvas but outside image
audio.src = "sound2.mp3";
audio.play();
}
else{
audio.src = "sound3.mp3";
audio.play();
}
// GENERATE RANDOM LOCATION
var x = Math.floor(Math.random()*300);
var y = Math.floor(Math.random()*300);
var obj = document.getElementById("myCanvas");
obj.style.top = x + "px";
obj.style.left = y + "px";
obj.style.bottom = x - "px";
obj.style.right = y - "px";
},false);
}
</script>
原始问题和代码:我的中心有一个矩形画布和一个图像。我想在画布内部(但在图像外部)点击并且点击在图像内部时播放不同的音频文件。 这就是我现在所拥有的
<canvas id="myCanvas" width="400" height="400" style="border:1px solid white;" onclick="myFunct()"></canvas>
<!-- audio source is specified later-->
<audio id="audio"></audio>
<script>
var canvas=document.getElementById("myCanvas");
context = canvas.getContext('2d');
make_background();
function make_background()
{
img = new Image();
img.src = 'img.gif';
img.onload = function(){
context.drawImage(img, 100, 100);
}
}
function play(){
var audio = document.getElementById("audio");
audio.play();
}
function myFunct() {
var audio = document.getElementById("audio");
var canv = document.getElementById("myCanvas");
document.addEventListener("click", function(e){
if( inside canvas and inside img){
audio.src = "sound1.mp3";
audio.play();
}
else if (inside canvas and outside img) {
audio.src = "sound2.mp3";
audio.play();
}
else{
audio.src = "sound3.mp3";
audio.play();
}
},false);
}
</script>
答案 0 :(得分:0)
要小心谨慎,每次单击画布时,myFunct调用都会将多个单击事件绑定到文档中。我编辑了小提琴,以实现您正在寻找的东西。如果有帮助,请告诉我。
<canvas id="myCanvas" width="400" height="400" style="border:1px solid white;" onclick="myFunct(event)"></canvas>
<!-- audio source is specified later-->
<audio id="audio"></audio>
<script>
var canvas=document.getElementById("myCanvas");
context = canvas.getContext('2d');
var imageObj = make_background();
function make_background()
{
img = new Image();
img.src = 'http://placehold.it/100x100';
img.onload = function(){
context.drawImage(img, 100, 100);
}
return img;
}
function play(){
var audio = document.getElementById("audio");
audio.play();
}
function myFunct(e) {
var audio = document.getElementById("audio");
var canv = document.getElementById("myCanvas");
if( e.clientX > 100 && e.clientX < 100 + imageObj.width && e.clientY > 100 && e.clientY < 100 + imageObj.height){
console.log('inside image and canvas');
//audio.src = "sound1.mp3";
//audio.play();
}
else if (e.clientX > 400 || e.clientY > 400) {
// outside canvas
console.log('outside canvas');
//audio.src = "sound2.mp3";
//audio.play();
}
else{
console.log('inside canvas but outside image');
//audio.src = "sound3.mp3";
//audio.play();
}
}
</script>