javascript - 如何使用 Canvas 变换重新创建此 CSS 变换？

Question

我正在尝试使用呈现在 HTML5 画布上的文本重新创建 CSS 转换的输出。

这是我要重新创建的实际 CSS 转换：

transform : skew(-22deg, -8deg);

我一直在玩 HTML5 画布 API 中的 context.transform() 和 context.setTransform 方法，但无法接近上述转换？

如何在画布元素中匹配上述 css 转换？

此外，是否有任何在线工具可用于帮助可视化矩阵转换？

提前致谢。

Answer 1

现场演示

就像你想的那样使用变换，关键是知道值应该去哪里。

var canvas = document.getElementsByTagName("canvas")[0],
    ctx = canvas.getContext("2d");

canvas.width = canvas.height = 100;

ctx.font = "20px arial";
var rad1= -8 * Math.PI / 180;
var rad2= -22 * Math.PI / 180;


ctx.setTransform(1, rad1, rad2, 1, 0, 0);
ctx.fillText("test",30,80);