Canvas 學(xué)習(xí)筆記之變形 -- by Damon

狀態(tài)保存和恢復(fù)

ctx.save()
ctx.restore()

狀態(tài)包括：

• 當(dāng)前的移動(dòng)、旋轉(zhuǎn)、縮放
• strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation 的值
• 當(dāng)前的裁切路徑（cliping path)

狀態(tài)棧：
每次調(diào)用save就是入棧操作，restore就是出棧操作

ctx.translate(x, y)
ctx.rotate(ratio)
ctx.scale(x, y)
ctx.setTransform(m11, m12, m21, m22, dx, dy)
ctx.resetTransform() // == ctx.setTransform(1, 0, 0, 1, 0, 0)

m11: 水平方向的縮放
m12: 水平方向的偏移
m21: 豎直方向的偏移
m22: 豎直方向的縮放
dx: 水平方向的移動(dòng)
dy: 豎直方向的移動(dòng)

常用方法
變換前先save一下?tīng)顟B(tài)，然后變形，畫(huà)完后重置

Paste_Image.png

window.onload = function() {

  translate();
  rotating();
  scale();
};

// 1
function translate() {

  var cvs = document.getElementById('my-canvas-1');
  var ctx = cvs.getContext('2d');
  cvs.height = 300;
  cvs.width = 300;

  ctx.fillRect(0, 0, 300, 300);
  for (var i = 0; i < 3; i++) {
    for (var j = 0; j < 3; j++) {
      ctx.save();
      ctx.strokeStyle = '#9CFF00';
      ctx.translate(50 + j * 100, 50 + i * 100);
      ctx.beginPath();
      ctx.arc(0, 0, 20, 0, Math.PI * 2);
      ctx.closePath();
      ctx.stroke();
      ctx.restore();
    }
  }
}
// 2
function rotating() {

  var cvs = document.getElementById('my-canvas-2');
  var ctx = cvs.getContext('2d');
  cvs.height = 300;
  cvs.width = 300;

  ctx.translate(150, 150);
  for (var i = 1; i < 7; i++) {
    for (var j = 0; j < i * 6; j++) {
      ctx.save();
      ctx.fillStyle = '#F0F';
      ctx.rotate(2 * Math.PI / 6 / i * j);
      ctx.beginPath();
      ctx.arc(20 * i, 0, 4, 0, Math.PI * 2);
      ctx.closePath();
      ctx.fill();
      ctx.restore();
    }
  }
}
// 3
function scale() {

  var cvs = document.getElementById('my-canvas-3');
  var ctx = cvs.getContext('2d');
  cvs.height = 300;
  cvs.width = 300;

  ctx.translate(150, 150);
  for (var i = 1; i < 7; i++) {
    for (var j = 0; j < i * 6; j++) {
      ctx.save();
      ctx.scale(1 + i / 10, 1 + i / 10);
      ctx.fillStyle = '#F0F';
      ctx.rotate(2 * Math.PI / 6 / i * j);
      ctx.beginPath();
      ctx.arc(20 * i, 0, 4, 0, Math.PI * 2);
      ctx.closePath();
      ctx.fill();
      ctx.restore();
    }
  }
}
// 4
function transform() {
  var cvs = document.getElementById('my-canvas-2');
  var ctx = cvs.getContext('2d');
  cvs.height = 300;
  cvs.width = 300;

  ctx.translate(150, 150);
  for (var i = 1; i < 7; i++) {
    for (var j = 0; j < i * 6; j++) {
      ctx.save();
      ctx.fillStyle = '#F0F';
      ctx.rotate(2 * Math.PI / 6 / i * j);
      ctx.beginPath();
      ctx.arc(20 * i, 0, 4, 0, Math.PI * 2);
      ctx.closePath();
      ctx.fill();
      ctx.restore();
    }
  }
}

代碼地址
Demo地址