Skew Transformation HTML5-Canvas

Question

Ich versuche Skew Transformation mit der "x-Achse" mit HTML5 Leinwand zu implementieren, aber mein Code nicht ... Hier ist mein 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); 
    } 
} 

ich sehr sein werde froh wenn ich ein Beispiel in JsFiddle sehe.

Vielen Dank im Voraus!

Answer 1

Die richtige Matrix aus nur einer Richtung

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

Mit der Zahl an ^ 1 ist, sind Verkanten man das Bild in der y -Richtung um 45 ° als auch in Schrägstellung ist.

Beispiel: http://jsbin.com/etecay/edit#html,live