CSS 中 Canvas Skew 在 setTransform 中使用什么值？

Question

http://www.w3schools.com/tags/canvas_settransform.asp

context.setTransform(a,b,c,d,e,f);

W3C 学校说 “水平倾斜绘图”，但它使用哪个值？

它似乎不像 CSS 那样扭曲事物，也没有使用 PI。解释一下？

Answer 1

在您的示例转换中，b 和 c 将分别代表水平和垂直倾斜。

变换矩阵是这样排列的:

context.setTransform(scaleX, skewX, skewY, scaleY, translateX, translateY);

倾斜量是以弧度表示的切线 Angular 。

所以这将水平倾斜 30 度:

    var tan30degrees=Math.tan( 30*Math.PI/180 );

    ctx.save();
    ctx.setTransform(1,tan30degrees,0,1,0,0);
    ctx.fillRect(100,100,50,50);
    ctx.restore();