在画布上绘制一个小球，当单击键盘上的左右光标键，则画布上的小球会向左右移动，并且圆周遇到边界时停止。初始时小球位于画布的中央。

在canvas上创建一个小球并实现这种交互通常需要使用JavaScript和HTML5 Canvas API。首先，你需要设置一个Canvas元素作为画布，并在其中初始化一个小球的圆形路径。以下是基本步骤：

1. **HTML结构**:

<canvas id="myCanvas" width="800" height="600"></canvas>

2. **JavaScript部分**:

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// 初始化小球位置
var ballX = canvas.width / 2;
var ballY = canvas.height / 2;
var radius = 50;

// 创建小球路径
function drawBall() {
    ctx.beginPath();
    ctx.arc(ballX, ballY, radius, 0, Math.PI * 2);
    ctx.fillStyle = 'blue';
    ctx.fill();
}

drawBall(); // 初始绘制

// 监听键盘事件
document.addEventListener('keydown', function(e) {
    switch (e.keyCode) {
        case 37: // 左箭头
            if (ballX > radius) {
                ballX -= 5; // 每次减小5像素直到碰到边界
            }
            break;
        case 39: // 右箭头
            if (ballX < canvas.width - radius) {
                ballX += 5; // 同理，每次增加5像素
            }
            break;
    }

    // 重绘小球
    drawBall();
});

在这个示例中，我们监听了键盘的左右箭头键，每当按下时，根据按键的方向调整小球的位置。如果小球碰到了边界，就会停止移动。