5

HTML5 キャンバスで「x」軸を使用して傾斜変換を実装しようとしていますが、コードが失敗します... これが私の JavaScript です。

function init() {
    var canvas = document.getElementById('skewTest'),
        context = canvas.getContext('2d'),
        angle = Math.PI / 4;
    img = document.createElement('img');
    img.src = 'img.gif';
    img.onload = function () {
        context.setTransform(1, Math.tan(angle), 1, 1, 0, 0);
        context.clearRect(0, 0, 200, 200);
        context.drawImage(img, 0, 0, 100, 100);
    }
}

JsFiddle での動作例を見ていただければ幸いです。

前もって感謝します！

4

1 に答える 1

8

一方向のみの正しいスキュー行列は次のとおりです。

    context.setTransform(1, Math.tan(angle), 0, 1, 0, 0);
    //                                       ^

数値^が 1 の場合、画像をy方向にも 45° 傾けています。

サンプル: http://jsbin.com/etecay/edit#html,live

于 2012-04-02T19:10:38.047 に答える