Javascriptista

transform(伸縮x, 傾斜y, 傾斜x, 伸縮y, 移動x, 移動y)となるようです。ややこしいですが、覚えると画像を楽しく変形させることができます。

DEMO

3倍にした四角形を描く

DEMO

  canvas = document.getElementById('canvas');
  ctx = canvas.getContext('2d');

  //標準の四角形
  ctx.strokeStyle = "red";
  ctx.strokeRect(40, 50, 60, 60);

  /* 3倍の拡大する変換マトリックス定義 */
  ctx.setTransform(3, 0, 0, 3, 0, 0);
  ctx.strokeStyle = "green";
  ctx.strokeRect(40, 50, 60, 60);

図形を傾けさせる

DEMO

  canvas = document.getElementById('canvas');
  ctx = canvas.getContext('2d');

  //標準の四角形
  ctx.strokeStyle = "red";
  ctx.strokeRect(80, 50, 100, 60);

  //30度のラジアン生成
  var rad = 30 * Math.PI / 180;
  // 右に45°回転する変換マトリックスを定義
  ctx.setTransform(Math.cos(rad), Math.sin(rad), -Math.sin(rad), Math.cos(rad), 0, 0);

  //図形を描画
  ctx.strokeStyle = "blue";
  ctx.strokeRect(80, 50, 100, 60);

図形を移動させる

DEMO

  canvas = document.getElementById('canvas');
  ctx = canvas.getContext('2d');

  //標準の四角形
  ctx.strokeStyle = "red";
  ctx.strokeRect(80, 50, 100, 60);

  // 50,50移動させて表示
  ctx.setTransform(1,0,0,1,50,50);

  //図形を描画
  ctx.strokeStyle = "blue";
  ctx.strokeRect(80, 50, 100, 60);