Canvas-圖片縮放
- 由上一篇canvas-旋轉的例子可以了解到canvas的一些特性，不熟悉的同學可以先去看看canvas-旋轉。
我們在將圖片引入canvas時，圖片會一原始像素渲染。這樣往往不是我們想要的大小。這時就要用到canvas的scale(x, y)方法：如果您對繪圖進行縮放，所有之后的繪圖也會被縮放。定位也會被縮放。如果您 scale(2,2)，那么繪圖將定位於距離畫布左上角兩倍遠的位置。這里就會有個問題，我們在用drawImage(img,10,10)方法的時候，x, y坐標也會更具scale的縮放而改變。
例如：
// 這里是正常渲染圖片
var img = document.getElementById('img')
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext("2d")
ctx.drawImage(img, 20, 20)
// 放大2倍后
var img = document.getElementById('img')
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext("2d")
ctx.scale(2, 2)
ctx.drawImage(img, 20, 20)
從上圖可以發現圖片放大2倍，相對畫布的x，y軸坐標也放大了兩倍，這顯然不是我們想要的，所以在渲染圖片的時候設置的x，y應該要對應的縮小2倍，這樣就可以抵消對應的縮放值了。
var img = document.getElementById('img')
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext("2d")
ctx.scale(2, 2)
ctx.drawImage(img, 20 / 2, 20 / 2);
再結合canvas旋轉的方法，封裝一個可以旋轉縮放的方法:
/**
* @param ctx: 畫布
* @param img: 圖片
* @param x 最終渲染x軸坐標
* @param y 最終渲染y軸坐標
* @param width 圖片原始w
* @param height 圖片原始h
* @param scale 縮放比例
* @param rotate 旋轉角度
*/
function canvas (ctx, img, x, y, width, height, scale, rotate) {
width *= scale
height *= scale
// 切換畫布中心點->旋轉畫布->切回畫布原來中心點// 此時畫布已經旋轉過
ctx.translate(x + width / 2, y + height / 2);
ctx.rotate(rotate / 180 * Math.PI, rotate / 180 * Math.PI);
ctx.translate(-(x + width / 2), -(y + height / 2));
// 放大
ctx.scale(scale, scale);
ctx.drawImage(img, x / scale, y / scale); // 不放大x和y
// 縮回原來大小
ctx.scale(1 / scale, 1 / scale);
// 切換畫布中心點->旋轉畫布->切回畫布原來中心點// 將畫布旋轉回之前的角度
ctx.translate(x + width / 2, y + height / 2);
ctx.rotate(-rotate / 180 * Math.PI, -rotate / 180 * Math.PI);
ctx.translate(-(x + width / 2), -(y + height / 2));
}