讓image最大化適應canvas的寬高

1
var canvas = ctx.canvas;

1
var wRatio = canvas.width / img.width;                //寬度比
2
var hRatio = canvas.height / img.height;              //高度比
3
var ratio = Math.min(wRatio, hRatio);                 //min者，依寬高比小者為主，寬高比大者留白； max者，依寬高比大者為主，寬高比小者裁切
4
var shiftX = (canvas.width - img.width * ratio) / 2;  //若此值不為0，表示有留白或虛裁切，左右區域應同寬
5
var shiftY = (canvas.height - img.height * ratio) / 2;//若此值不為0，表示有留白或虛裁切，上下區域應同高

1
ctx.clearRect(0, 0, canvas.width, canvas.height);
2
ctx.drawImage(img, 0,0, img.width, img.height, shiftX, shiftY,img.widthratio, img.heightratio);