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

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

1 个答案: