「canvas 要素で遊ぶ」では、回転速度やイメージの大きさを制御できませんでしたが、制御できるようにしてみました。

以下の canvas 内をドラッグ & ドロップすることで、画像を回転させたり、拡大縮小ができるようになります。

手元の環境では、Internet Explorer 6 での動作が今ひとつ。やはりネイティブ対応じゃないので、重いのかもしれません。Internet Explorer では、記事の個別表示でしかうまく動作しないようです。もし以下にうまく画像が表示されない場合は、個別に記事を表示してみてください。

回転処理を入れると、ベクトル関連の処理が多くなります。今回のサンプルスクリプトでは、2 次元ベクトルを表現する簡単なオブジェクトも宣言しています。

function Vector(x,y)
{
  this.x = x;
  this.y = y;
  return this;
}
Vector.prototype = {
  length : function()
  {
    return Math.sqrt(this.x * this.x + this.y * this.y)
  },
  angle : function()
  {
    var theta = Math.acos(this.x / this.length());
    return (this.y > 0) ? theta : theta * -1;
  },
  clone : function()
  {
    return new Vector(this.x,this.y);
  },
  rotate : function(theta)
  {
    var x = Math.cos(theta) * this.x - Math.sin(theta) * this.y;
    var y = Math.sin(theta) * this.x + Math.cos(theta) * this.y;
    this.x = x;
    this.y = y;
    return this;
  }
};

画像の拡大縮小は drawImage メソッドで行っています。Canvas には、そのものずばり scale というメソッドもあるのですが、scale ではコンテキストそのものを拡大縮小してしまい、今回の用途には向いていませんでした。

マウスカーソルの位置をトラックして表示するようにもしています。コンテキストが回転しているので、回転した角度の分、戻して点を表示する必要があるという部分がややトリッキーです。

サンプルスクリプトの 96 行目から始まる「_point」という関数がカーソル位置のトラック処理です。