遊戲的背景圖可以是隻有一個（很長很長），也可以是分開有幾個相同大小的小圖。
這裏寫兩個小例子，第一個是單次移動一張很長很長的背景圖：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript">
var w = 900;
var h = 400;
var x0 = 0;
var y0 = 0;
var ctx0;
var image0= new Image();
image0.src ="background.jpg";
function init()
{
ctx0 = document.getElementById('canvas').getContext('2d');
setInterval(paintback,50);
}
function paintback()
{
x0 +=10;
ctx0.clearRect(0,0,w,h);
ctx0.drawImage(image0,x0,y0,w,h,0,0,w,h);
}
</script>
</head>
<body οnlοad="init();">
<canvas id="canvas" width="900" height="600">I am sorry that YOU CAN'T USE the html5</canvas>
</body>
</html>另一個是循環場景的切換：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript">
var w = 900;
var h = 600;
var x0 = 0;
var y0 = 0;
var x1 = w;
var y1 = 0;
var x2 = 2*w;
var y2 = 0;
var move = 100;
var ctx0;
var image0= new Image();
image0.src ="0.jpg";
var image1 = new Image();
image1.src = "0.jpg"
var image2 = new Image();
image2.src = "0.jpg"
function init()
{
ctx0 = document.getElementById('canvas').getContext('2d');
setInterval(paintback,100);
}
function paintback()
{
ctx0.clearRect(0,0,w,h);
x0 +=move;
x1 +=move;
x2 +=move;
if(x0>=2*w)
{
x0=move-w;
}
if(x1>=2*w)
{
x1=move-w;
}
if(x2>=2*w)
{
x2=move-w;
}
ctx0.drawImage(image0,x0,y0,w,h);
ctx0.drawImage(image1,x1,y1,w,h);
ctx0.drawImage(image2,x2,y2,w,h);
}
</script>
</head>
<body οnlοad="init();">
<canvas id="canvas" width="900" height="600">I am sorry that YOU CAN'T USE the html5</canvas>
</body>
</html>當然了，如果添加邏輯的話，setInterval果斷改成事件觸發就好了。