Как исказить текст, созданный функцией fillText () для тега canvas в HTML5?

Question

Как мне исказить текст, созданный функцией fillText () для тега canvas в HTML5?

Будет ли это сделано так же, как MozTransform, webkitTransform, oTransform, transform и т. Д .?

Answer 1

Используйте выражение вроде

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

См. Спецификацию для преобразований холста .

Так что, где бы вы использовали строку 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, который возвращает преобразование к тождеству.