js绘制帧动画及滚动背景

目标

使用js绘制平滑过渡的帧动画

调用API

drawImage();//在convas目画布上绘制指定图片，并可指定位置及绘制大小

requestAnimationFrame();//绘制动画用函数

绘制帧动画

//启动定时绘制
requestAnimationFrame(animation);
function animation(now)
{
    draw(); //实现需要绘制的内容
    requestAnimationFrame(animation);
}

绘制滚动背景

canvas对象的translate（x1，y1）用于平移画布。那么只需在每次绘制时改变坐标，

context.translate(-backgroundOffset,0);
context.drawImage(background,0,0);
context.drawImage(background,background.width,0)
context.translate(backgroundOffset,0);
backgroundOffset++;

即可实现画布平移。因为这种实现改变的时画布的位置，所以完成绘制后ÿ