toile HTML5 de transformation obliquité

Question

Je suis en train de mettre en œuvre la transformation skew en utilisant le « x » axe avec la toile HTML5, mais mon code échoue ... Voici mon 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); 
    } 
} 

Je serai très heureux si je vois un exemple de travail dans JsFiddle.

Merci d'avance!

Answer 1

La matrice correcte de l'inclinaison dans une seule direction est

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

Avec le nombre à ^ étant 1, on augmente artificiellement l'image dans la y -direction de 45 ° également.

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