忍者ブログ

30Mar

[PR]

Posted by in

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

13Mar

Canvasのtransform。ややこしいが、いろいろ一度に指定できる。

Posted by No Name Ninja in Javascript Sample

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

Comment


Vodafone絵文字 i-mode絵文字 Ezweb絵文字