[英]Skew transformation HTML5 canvas
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! 先感谢您!
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°。
Sample: http://jsbin.com/etecay/edit#html,live 示例: http : //jsbin.com/etecay/edit#html,live
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.