HTML5畫布是一種非常強大的技術，它使得我們可以在網頁上進行繪圖、動畫、游戲等各種交互操作。下面我們來看一個HTML5畫布小游戲的源代碼：

// 創建畫布
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// 設置畫布的寬度和高度
canvas.width = 400;
canvas.height = 400;
// 創建小球對象
var ball = {
x: canvas.width/2, // 小球的橫坐標
y: canvas.height-30, // 小球的縱坐標
radius: 10, // 小球的半徑
dx: 2, // 小球的橫向速度
dy: -2 // 小球的縱向速度
};
// 創建擋板對象
var paddle = {
x: (canvas.width-75)/2, // 擋板的橫坐標
y: canvas.height-10, // 擋板的縱坐標
width: 75, // 擋板的寬度
height: 10, // 擋板的高度
dx: 5 // 擋板的移動速度
};
// 監聽鍵盤事件，控制擋板的移動
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
var rightPressed = false;
var leftPressed = false;
function keyDownHandler(e) {
if(e.keyCode == 39) {
rightPressed = true;
}
else if(e.keyCode == 37) {
leftPressed = true;
}
}
function keyUpHandler(e) {
if(e.keyCode == 39) {
rightPressed = false;
}
else if(e.keyCode == 37) {
leftPressed = false;
}
}
// 繪制小球
function drawBall() {
context.beginPath();
context.arc(ball.x, ball.y, ball.radius, 0, Math.PI*2);
context.fillStyle = "#0095DD";
context.fill();
context.closePath();
}
// 繪制擋板
function drawPaddle() {
context.beginPath();
context.rect(paddle.x, paddle.y, paddle.width, paddle.height);
context.fillStyle = "#0095DD";
context.fill();
context.closePath();
}
// 檢測小球與擋板的碰撞
function collisionDetection() {
if(ball.x + ball.dx >canvas.width-ball.radius || ball.x + ball.dx< ball.radius) {
ball.dx = -ball.dx;
}
if(ball.y + ball.dy< ball.radius) {
ball.dy = -ball.dy;
}
else if(ball.y + ball.dy >canvas.height-ball.radius) {
if(ball.x >paddle.x && ball.x< paddle.x + paddle.width) {
ball.dy = -ball.dy;
}
else {
alert("Game Over");
document.location.reload();
}
}
}
// 繪制游戲界面
function draw() {
// 清空畫布
context.clearRect(0, 0, canvas.width, canvas.height);
// 繪制小球和擋板
drawBall();
drawPaddle();
// 檢測碰撞
collisionDetection();
// 控制擋板的移動
if(rightPressed && paddle.x< canvas.width-paddle.width) {
paddle.x += paddle.dx;
}
else if(leftPressed && paddle.x >0) {
paddle.x -= paddle.dx;
}
// 控制小球的移動
ball.x += ball.dx;
ball.y += ball.dy;
}
// 每隔10毫秒執行一次游戲循環
setInterval(draw, 10);

以上就是一個使用HTML5畫布技術制作的小游戲的完整源代碼，通過這個例子可以看出，HTML5畫布非常適合制作一些基于圖形的小游戲，而且也比較容易上手。