javascript - 倾斜变换 HTML5 画布

Question

我正在尝试使用带有 HTML5 画布的“x”轴实现倾斜转换，但我的代码失败了......这是我的 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 时，您也将图像在y方向上倾斜 45°。

示例：http: //jsbin.com/etecay/edit#html,live