倾斜转换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，实时

Answer 2

Canvas不支持直接转换；请使用以下代码：

ctx.lineWidth = 100;
ctx.strokeStyle = "rgba(255, 255, 255, 0.5)";
ctx.strokeRect(0, 0, 640, 480);
ctx.lineWidth = 4;
ctx.strokeStyle = "#5E81AB";
ctx.strokeRect(50, 50, 540, 380);