如何倾斜由 fillText() 为 HTML5 中的 canvas 标签生成的文本？答案

【问题标题】：How do I skew the text generated by fillText() for the canvas tag in HTML5?如何倾斜由 fillText() 为 HTML5 中的 canvas 标签生成的文本？
【发布时间】：2010-05-02 10:59:28
【问题描述】：

如何在 HTML5 中倾斜由 fillText() 为 canvas 标签生成的文本？

会不会和 MozTransform、webkitTransform、oTransform、transform 等一样？

【问题讨论】：

标签： html canvas

【解决方案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，它将转换设置回身份。

【讨论】：

谢谢！是的，我正在尝试 context.style.MozTransform = "skewx(45deg)";和 context.MozTransform = "skewx(45deg)"; （以及 WebKit 和 Presto 版本，但它们不适用于画布。