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

Я пытаюсь реализовать косое преобразование, используя ось "x" с холстом 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.

Заранее спасибо!


javascript canvas transformation skew
person Community    schedule 02.04.2012    source источник

Ответы (1)


arrow_upward
8
arrow_downward

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

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

Если число ^ равно 1, вы также наклоняете изображение в направлении y на 45°.

Пример: http://jsbin.com/etecay/edit#html,live

person kennytm    schedule 02.04.2012