перекос преобразование HTML5 холст

Question

Я пытаюсь осуществить преобразование перекоса с помощью «х» оси с HTML5 холстом, но мой код не ... Вот мой 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

Правильная матрицей перекоса только в одном направления является

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

с номером в ^ равно 1, вы перекос изображения в у -направления на 45 °, а также.

Образец: http://jsbin.com/etecay/edit#html,live