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

Question

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

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

根据W3C schools的说法，“将绘图水平倾斜”，但它使用哪个值呢？

似乎不是CSS中使用的角度值，也不是π，为什么呢？

- Camathon

Answer 1

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

变换矩阵排列如下：

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

偏斜量是以弧度表示的正切角。

因此，这将水平偏斜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();

- markE

Answer 2

转换矩阵是一组包含九个数字的集合，用于使用线性代数变换二维数组（例如位图）。矩阵的最后一组始终为0 0 1，因此需要六个不同的参数。

请查看此内容。

https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/HTML-canvas-guide/MatrixTransforms/MatrixTransforms.html

- lopa