canvas绘制图片及帧动画

1.绘制图片

1 基本绘制图片的方式

context.drawImage(img,x,y);
x,y 绘制图片左上角的坐标，在画布上绘制的坐标点 img是绘制图片的dom对象。

2 在画布上绘制图像，并规定图像的宽度和高度

context.drawImage(img,x,y,width,height);
width 绘制图片的宽度, height：绘制图片的高度

如果指定宽高，最好成比例，不然图片会被拉伸

等比公式： toH = Height * toW / Width;
设置的高度 = 原高度 * 设置的宽度 / 原宽度;

3 图片裁剪，并在画布上定位被剪切的部分

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
sx,sy 裁剪的左上角坐标，
swidth：裁剪图片的高度。
sheight:裁剪的高度
其他同上

---

eg:绘制图片

2.绘制帧动画

创建image对象
添加src
需要定时器，(ctx.drawImage)并轮播图片

---

  eg:
    //1.获取上下文
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var picSize = 256;
var duration = 200;
var index = 0;
var dir = 0;        //默认为向左运动
//2.获取图片对象
var image = new Image();
image.src="images/girl.png";
image.addEventListener('load',function(){
    setInterval(function(){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.drawImage(image,index * picSize,dir * picSize,picSize,picSize,200,100,picSize,picSize);
        index++;
        index %= 8;
    },duration);
});