指尖下的琴音：Canvas琴键弹奏的艺术

2023-09-13 10:05:30

HTML5 Canvas为创造性网页设计开辟了无限的可能性。从迷人的动画到互动游戏，Canvas都能赋予开发者挥洒创意的无限空间。今天，我们用Canvas打造一个神奇的钢琴，让你用键盘尽情演奏美妙的乐章。

指尖下的琴音

我们的Canvas钢琴将有88个琴键，每个琴键都有自己独特的音效。我们使用JavaScript来处理键盘输入，并通过音频元素来播放声音。

键盘事件侦听器

首先，我们需要设置键盘事件侦听器来检测按下和释放键盘按键的事件。我们可以使用 addEventListener 方法将 keydown 和 keyup 事件监听器附加到 document 对象：

document.addEventListener('keydown', keyDownHandler, false);
document.addEventListener('keyup', keyUpHandler, false);

处理键盘输入

接下来，我们需要在事件处理程序函数中处理键盘输入。对于 keydown 事件，我们需要确定按下的琴键并播放相应的声音。对于 keyup 事件，我们需要停止播放声音：

function keyDownHandler(e) {
  const key = e.key;
  playNote(key);
}

function keyUpHandler(e) {
  const key = e.key;
  stopNote(key);
}

播放和停止声音

为了播放声音，我们需要创建一个新的音频元素并设置其 src 属性为要播放的声音文件。然后，我们可以使用 play() 方法播放声音：

function playNote(key) {
  const audio = new Audio(`sounds/${key}.wav`);
  audio.play();
}

要停止播放声音，我们可以使用 pause() 方法：

function stopNote(key) {
  const audio = new Audio(`sounds/${key}.wav`);
  audio.pause();
}

绘制钢琴键盘

有了键盘输入处理程序后，我们就可以绘制钢琴键盘了。我们可以使用Canvas的 fillRect 方法绘制每个琴键：

function drawPianoKeys() {
  const canvas = document.getElementById('piano-canvas');
  const ctx = canvas.getContext('2d');

  for (let i = 0; i < 88; i++) {
    const keyWidth = canvas.width / 88;
    const keyHeight = canvas.height;
    const keyX = i * keyWidth;
    const keyY = 0;

    ctx.fillStyle = 'white';
    ctx.fillRect(keyX, keyY, keyWidth, keyHeight);
  }
}

完整代码

以下是创建Canvas钢琴的完整代码：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <canvas id="piano-canvas" width="800" height="200"></canvas>

  <script>
    // ... 代码如上 ...
  </script>
</body>
</html>