L'inclinaison de la transformation HTML5 canvas

Je suis en train de mettre en œuvre l'inclinaison de la transformation à l'aide de l'axe "x" avec HTML5 canvas, mais mon code ne fonctionne pas... Voici mon code 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 qui travaillent par exemple dans JsFiddle.

Vous en remercie d'avance!

OriginalL'auteur | 2012-04-02

  1. 6

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

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

    Avec le numéro de ^ étant de 1, vous êtes l'inclinaison de l'image dans la y-direction de 45°.

    Exemple: http://jsbin.com/etecay/edit#html,en direct

    OriginalL'auteur kennytm