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)作为原点