可以通过画布上的引用变量来单击函数

基本上，您必须为画布实现手动按钮解决方案。这并不像听起来那么复杂（顺便说一句，地图也是一种方式，但我不在这里介绍它）。

这个解决方案是动态的，这意味着你可以扩展八度音阶的数量、画布的大小等。所有的东西都会自动调整。

首先，让音符数组定义每个八度音阶中的键数，以及哪些键应该是黑色的；我们将使用#附录来确定：

var notes = ['C','C#','D','D#','E','F','F#','G','G#','A','A#','B'];
var keys = notes.length * octaves;

有关渲染的详细执行方式，请参阅以下来源。

使用白键的单独索引循环键的数量（因为黑键是相对的），我们得到了一个完整的钢琴键盘。我们将计算出的键的x位置存储在两个不同的数组中，一个用于黑键，另一个用于白键，这使得以后更容易进行命中测试（另一种选择是存储键形状-最多4个-并将其用作命中测试路径）。

当钢琴被渲染时，我们可以检查鼠标按下事件（如果你想在鼠标按下时拖动以播放不同的键，你需要在鼠标按下的时候设置一个向下标志，然后在鼠标移动事件中使用其他代码并进行一些优化-这里没有显示）。

// check for mouse down
canvas.addEventListener('mousedown', function(e) {
    // adjust mouse position
    var rect = canvas.getBoundingClientRect(),
        x = e.clientX - rect.left,
        y = e.clientY - rect.top,
        i, a;
    // fill color for key down
    ctx.fillStyle = '#fa2';
    //in blacks?
    for(i = 0; a = arrayBlacks[i++];) {
        ctx.beginPath();                               // start new path for test
        ctx.rect(a[0], 0, blackKeyWidth - 2, h * .67); // add a rect to path
        if (ctx.isPointInPath(x, y)) {                 // test if point is in path
            ctx.fill();                                // yes, fill it
            outputKey(a[1], a[2]);                     // show/play note
            return;
        }
    }
    //in whites? (same as above, but for arrayWhites)
    for(i = 0; a = arrayWhites[i++];) {
    ...cut... see full source
}, false);

当鼠标释放时，为了简单起见，我们只是重新渲染所有内容。对于较大的键盘（额外的八度音阶），您可能需要考虑按路径对象方法，其中每个键都存储为形状。

// if mouse up, re-render all
canvas.addEventListener('mouseup', function(e) {
    renderPiano(false);
}, false);

所有详细信息都可以在所附的实时片段中找到。希望这能有所帮助！

// some initial values/setup
var canvas = document.getElementById('piano'),  // get canvas
    ctx = canvas.getContext('2d'),              // get context
    h = canvas.height,                          // cache dimension
    w = canvas.width,
    
    octaves = 2,                                // octaves to render
    notes = ['C','C#','D','D#','E','F','F#','G','G#','A','A#','B'],
    keys = notes.length * octaves,              // pre-calc num of keys
    noteIndex = 0,                              // note index
    keyIndex = 0,                               // white key index
    note,                                       // note
    whiteKeyWidth = (w / (7 * octaves))|0,      // width of whites
    blackKeyWidth = whiteKeyWidth * 0.75,       // width of blacks
    i,                                          // iterator
    x,                                          // x pos of key
    
    arrayBlacks = [],                           // store black positions
    arrayWhites = []                            // store white positions
;
// calc piano key positions
for (i = 0; i < keys; i++) {
    noteIndex = i % notes.length;               // force within notes range
    note = notes[noteIndex];                    // get note name
    x = keyIndex * whiteKeyWidth;               // start pos. of key
    
    if (note.length === 1) {                    // white key (no sharp)
        arrayWhites.push([x, note, i]);         // store position
        keyIndex++;                             // next white key index
    }
    else {
        x -= blackKeyWidth * .5;                // adjust for black key
        arrayBlacks.push([x, note, i]);
    }
}
renderPiano(false);
// common render function based on whites/blacks arrays
// special switch: onlyBlacks to override white key rendered while down
function renderPiano(onlyBlacks) {
    var i, a;
    
    //render white keys
    if (!onlyBlacks) {
        ctx.clearRect(0, 0, w, h); // clear canvas for full render
        ctx.fillStyle = '#ffe';
        for(i = 0; a = arrayWhites[i++];) {
            ctx.fillRect(a[0], 0, whiteKeyWidth - 2, h - 1);
            ctx.strokeRect(a[0], 0, whiteKeyWidth - 2, h - 1);
        }
    }
  
    //render black keys
    ctx.fillStyle = '#000';
    for(i = 0; a = arrayBlacks[i++];) {
        ctx.fillRect(a[0], 0, blackKeyWidth - 2, h * .67);
    }
}
// check for mouse down
canvas.addEventListener('mousedown', function(e) {
    // adjust mouse position
    var rect = canvas.getBoundingClientRect(),
        x = e.clientX - rect.left,
        y = e.clientY - rect.top,
        i, a;
    ctx.fillStyle = '#fa2';
    //in blacks?
    for(i = 0; a = arrayBlacks[i++];) {
        ctx.beginPath();
        ctx.rect(a[0], 0, blackKeyWidth - 2, h * .67);
        if (ctx.isPointInPath(x, y)) {
            ctx.fill();
            outputKey(a[1], a[2]);
            return;
        }
    }
    //in whites?
    for(i = 0; a = arrayWhites[i++];) {
        ctx.beginPath();
        ctx.rect(a[0], 0, whiteKeyWidth - 2, h - 1);
        if (ctx.isPointInPath(x, y)) {
            ctx.fill();
            renderPiano(true);     // render black keys on top!
            outputKey(a[1], a[2]);
            return;
        }
    }
}, false);
// if mouse up, re-render all
canvas.addEventListener('mouseup', function(e) {
    renderPiano(false);
}, false);
// format output here, ie. play correct note etc.
function outputKey(key, index) {
    out.innerHTML = key + ((index / 12)|0);
    // play note
}

<canvas id="piano" width=540 height=160></canvas>
<br><output id="out"></output>