는 ... 여기 내 자바 스크립트 캔버스

Question

내가 HTML5 캔버스와 "X"축을 사용하여 스큐 변환을 구현하기 위해 노력하고있어,하지만 내 코드가 실패 기울이기 변환 HTML5 :

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

하나의 방향에서의 스큐의 올바른 행렬 ^ 1 인에 수로

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

인 경우뿐만 아니라, 45 °로 Y Y 방향의 이미지를 기울된다.

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