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:绘制图片
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var image = new Image();
image.src = "images/img_02.jpg";
image.addEventListener('load',function(){
ctx.drawImage(image, 50,50,200,200,180,180,200,200);
})
</script>
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);
});
