如何将fillText（）生成的文本倾斜为HTML5中的canvas标签？

Question

如何使用fillText（）为HTML5中的canvas标记生成文本？

它会以与MozTransform，webkitTransform，oTransform，transform等相同的方式完成吗？

Answer 1

使用类似

的声明

context.setTransform (1, -0.2, 0, 1, 0, 0);

请参阅spec for canvas transformations。

所以你在哪里使用像

这样的CSS线

-moz-transform:  matrix(a, c, b, d, tx, ty)

你可以使用Javascript

context.setTransform (a, c, b, d, tx, ty);

绘制文字的一个例子是

context.font = '20px arial,sans-serif' ;
context.fillStyle = 'black' ;
context.setTransform (1, -0.2, 0, 1, 0, 0);
context.fillText ('your text', 10, 10) ;
context.setTransform (1, 0, 0, 1, 0, 0);

注意最终的setTransform，它将变换设置回身份。