スキュー変換HTML5のキャンバス

Question

ここに...私は、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での作業例を見たら

ありがとうございます！

Answer 1

一方向にのみスキューの正しいマトリックスは^に数が1であると

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

で、あなたは同様に45°Y - 方向に画像をスキューされます。

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