Canvas で遊んでみる 2

javascript

画像を回転させる Bookmarklet を作ってみた。

javascript:(function(){var l=location.href;location.href='data:text\/html;charset=utf8,<html><head><script type="text\/javascript">function draw(){var canvas=document.getElementById("canvas");var img=document.createElement("img");img.src=\"'+l+'\";canvas.setAttribute("width",img.height);canvas.setAttribute("height", img.width);var ctx=canvas.getContext("2d");ctx.rotate(90*Math.PI/180);ctx.translate(0,-1*img.height);ctx.drawImage(img,0,0)}<\/script><\/head><body onload="draw()"><canvas id="canvas"><\/canvas><\/body><\/html>'})();


時計回りに90度回転させる ブックマークレット。 他の度数にする場合はさらに座標系をいじらないといけない。

使いかた

画像を開いて上記のブックマークレットを発動させるだけ。
Opera or Firefox で試してみてね。

javascript の部分を 抜き出してみる

function draw(){
    var canvas = document.getElementById("canvas");
    var img = document.createElement("img");
        img.src = "画像URL";
        canvas.setAttribute("width", img.height);
        canvas.setAttribute("height", img.width);
    var ctx = canvas.getContext("2d");
        ctx.rotate(90 * Math.PI / 180);
        ctx.translate(0, -1 * img.height);
        ctx.drawImage(img, 0, 0)
}

ポイント

rotate で回転させるわけだがcanvas要素の左下左上を中心に回るので 回転分を考慮して translate で座標系を移動させないといけない。

180 度だと

        canvas.setAttribute("width", img.width);
        canvas.setAttribute("height", img.height);
    var ctx=canvas.getContext("2d");
        ctx.rotate(Math.PI);
        ctx.translate( -1 * img.width, -1 * img.height);
        ctx.drawImage(img, 0, 0)

でいけると思う。

追記

重大な勘違いをしていた。 rotate させると座標も回転すことに気づいた。 だから rotate させる前に translate させといた方が混乱せずにすむ。

一般

どんな角度にも対応できるようにしようとしてるんだけど，頭がこんがらがって求めたいものが出ない。
とりあえず 0 〜 90 度 まではできたんだけどそれより上ができない。ダメだ。