canvas-縮放

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

這篇文章講的是在圖片縮放，canvas-旋轉。有寫的不好或錯誤的地方，望指出