Question

您好我正在尝试创建一个吉他英雄类程序，当按下相应的按键时，红色圆圈出现在小提琴图像上，但即使我写了，我也似乎无法使它们出现在图像上画布代码后面的代码。有人可以帮我弄这个吗？我还希望让圈子在一段时间后消失，但超时不会在这里诀窍，因为图像不是一种颜色，例如一段时间后将红色圆圈更改为背景颜色。我该怎么做？

<html>
    <head>
        <title>Violin Hero</title>
        <canvas id="myCanvas" width="1024" height="768"></canvas>
        <style>
            body {
                background-image: url("violin.jpg");
                background-size: 2500px 1300px;

            } 
        </style>
    </head>
    <body>  
        <canvas id="myCanvas" width="1024" height="768"></canvas>
        <img id="bow" src="bow.jpg" style="display:none;" />

        <script>
            var canvas = document.getElementById("myCanvas");
            var ctx = canvas.getContext("2d");

            window.addEventListener("keydown", soundPlay);
            function fillRed() {
                ctx.fillStyle = "red";
                ctx.fill();
            }

            function keyQ(){
                ctx.beginPath();
                ctx.arc(1200, 300, 15, 0,   Math.PI*2);
                ctx.fillStyle = "red";
                ctx.fill();
            }

            function keyW(){
                ctx.beginPath();
                ctx.arc(300, 300, 15, 0,    Math.PI*2);
                ctx.fillStyle = "red";
                ctx.fill();
            }

            function keyE(){
                ctx.beginPath();
                ctx.arc(900, 500, 15, 0,    Math.PI*2);
                ctx.fillStyle = "red";
                ctx.fill();
            }

            function keyR(){
                ctx.beginPath();
                ctx.arc(950, 100, 15, 0, Math.PI*2);
                ctx.fillStyle = "red";
                ctx.fill();
            }


            //var x = event.keyCode;

            //<input type="text" onkeydown="pressedKey(event)"> 

            function soundPlay(event) {
                var x = event.keyCode;

                if (x == 27) {  // 27 is the ESC key
                    alert ("You pressed the Escape key!");
                }
                else if (x == 81) {
                    keyQ();   
                    var sound = new Audio('1.mp3');
                    sound.play();
                    setTimeout(fillRed, 200);
                }
                else if (event.keyCode == 87) {
                    keyW();
                    var sound = new Audio("2.mp3");
                    sound.play();
                    setTimeout(fillRed, 200);
                }
                else if (event.keyCode == 69) {
                    keyE();
                    var sound = new Audio("3.mp3");
                    sound.play();
                    setTimeout(fillRed, 200);
                }
                else if (event.keyCode == 82) {
                    keyR();
                    var sound = new Audio("4.mp3");
                    sound.play();
                    setTimeout(fillRed, 200);
                }   
            }
        </script>
    </body>
</html>

Answer 1

要在图像前面添加某些内容/为了使元素始终位于元素之后，应该使用z-index。为这样的背景图像制作一个CSS：

#backgroundImg{
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}

这样，背景图像将始终落后。请查看this或this了解详情。

对于你的第二个问题，我建议你再发一篇文章，并将这个问题集中在一个问题上。

Answer 2

我为您创建了一个简单的Plunkr示例，介绍如何在JS中实现此类功能。

点击s，a或任何其他内容以显示红点。

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body id='mybody'>
    <img id='violin' src='http://cdn.shopify.com/s/files/1/0704/3831/products/Antoni_Debut_Violin_Outfit_3677b25a-7618-46f7-9313-6080c2a51e27_grande.jpg?v=1444483336'>
    <script>
      document.addEventListener('keydown', (event) => {
        console.log(event);
        if (event.key.toLowerCase() === 's') {
          showRedDot(110, 420);
        } else if (event.key.toLowerCase() === 'a') {
          showRedDot(150, 350);
        } else {
          showRedDot(200, 300);
        }
      });

      var showRedDot = (top, left) => {
        var oldDot = document.getElementById('redDot');
        if (oldDot) {
          oldDot.remove();
        }
        var dot = document.createElement('DIV');
        dot.id = 'redDot';
        dot.style.width = '10px';
        dot.style.height = '10px';
        dot.style.position = 'absolute';
        dot.style.borderRadius = '100%';
        dot.style.background = 'red';
        dot.style.top = top + 'px';
        dot.style.left = left + 'px';
        document.getElementById('mybody').appendChild(dot);
      };
    </script>
  </body>

</html>

这是一个有效的Plunkr

Javascript如何使对象出现在背景图像上

2 个答案: