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

Question

我正在尝试使用渲染到 HTML5 Canvas 上的文本重新创建 CSS 转换的输出。

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

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

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

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

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

提前致谢。

Answer 1

<强> Live Demo

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

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);