1.繪制圖片

1 基本繪制圖片的方式

context.drawImage(img,x,y);
x,y 繪制圖片左上角的坐標(biāo)，在畫布上繪制的坐標(biāo)點(diǎn) img是繪制圖片的dom對象。

2 在畫布上繪制圖像，并規(guī)定圖像的寬度和高度

context.drawImage(img,x,y,width,height);
width 繪制圖片的寬度, height：繪制圖片的高度

如果指定寬高，最好成比例，不然圖片會(huì)被拉伸

等比公式： toH = Height * toW / Width;
設(shè)置的高度 = 原高度 * 設(shè)置的寬度 / 原寬度;

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

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
sx,sy 裁剪的左上角坐標(biāo)，
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.繪制幀動(dòng)畫

創(chuàng)建image對象
添加src
需要定時(shí)器，(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;        //默認(rèn)為向左運(yùn)動(dòng)
//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);
});