canvas 步骤

canvas 方法
canvas.drawImage  绘制图片
// 绘制背景
var dx=0, dy=0 ;
context.drawImage(ImgCache["bg"],dx,dy);

//绘制站在地上的player, 坐标为200,284
var sx=0, sy=60, sw=50, sh=60;
var dx=400, dy=284, dw=50, dh=60;
context.drawImage(ImgCache["player"], sx, sy, sw, sh, dx, dy, dw, dh );

//第一个参数image可以用HTMLImageElement，HTMLCanvasElement或者HTMLVideoElement作为参数。
//sx和sy是image所要绘制的起始位置，sw和sh是image所要绘制区域（相对image的sx和sy坐标的偏移量）的宽度和高度值。
//dx和dy是image在canvas中定位的坐标值；dw和dh是image在canvas中即将绘制区域（相对dx和dy坐标的偏移量）的宽度和高度值；



canvas.beginPath()
canvas.beginPath() 方法来告诉 Context 对象开始绘制一个新的路径，否则接下来绘制的路径会与之前绘制的路径叠加，在填充或画边框时就会出现问题。在绘制完成路径后，可以直接使用 canvas.closePath() 方法来关闭路径，或者手动关闭路径。另外，如果在填充时路径没有关闭，那么canvas会自动调用 closePath 方法将路径关闭。


context.translate(130,250);

作用就是移动原点，默认的原点（0，0）是在屏幕左上角的，你可以通过translate（x，y）把点（x，y）作为原点