javascript – 偏斜转换HTML5画布
作者:互联网
我正在尝试使用带有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中看到工作示例,我会很高兴的.
先感谢您!
解决方法:
仅在一个方向上的正确倾斜矩阵是
context.setTransform(1, Math.tan(angle), 0, 1, 0, 0);
// ^
当^为1时,您将y方向的图像偏斜45°.
样品:http://jsbin.com/etecay/edit#html,live
标签:javascript,canvas,transformation,skew 来源: https://codeday.me/bug/20190826/1729917.html