javascript 倾斜变换 HTML5 画布
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9982338/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Skew transformation HTML5 canvas
提问by kennytm
I'm trying to implement skew transformation using the "x" axis with HTML5 canvas, but my code fails... Here is my JavaScript:
我正在尝试使用带有 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);
}
}
I'll be very glad if I see working example in JsFiddle.
如果我在 JsFiddle 中看到工作示例，我会很高兴。
Thank you in advance!
先感谢您！
回答by kennytm
The correct matrix of skewing in only one direction is
只有一个方向的正确倾斜矩阵是
context.setTransform(1, Math.tan(angle), 0, 1, 0, 0);
// ^
With the number at ^being 1, you are skewing the image in the y-direction by 45° as well.
数字^为 1 时，您也在y方向上将图像倾斜45°。
