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

Question

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

会不会像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，它将转换设置回标识。