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);
});
