2

HTML5 キャンバスにレンダリングされたテキストを使用して、CSS 変換の出力を再作成しようとしています。

これは、再作成したい実際の CSS 変換です。

transform : skew(-22deg, -8deg);

HTML5 キャンバス API で context.transform() および context.setTransform メソッドをいじっていますが、上記の変換に近づくことができませんでしたか?

キャンバス要素で上記の css 変換を一致させるにはどうすればよいですか?

また、マトリックス変換の視覚化に役立つオンライン ツールはありますか?

前もって感謝します。

4

1 に答える 1

3

ライブデモ

あなたが考えたように変換を使用しただけです。重要なのは、値がどこに行くべきかを知ることです。

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);
于 2012-10-26T17:26:12.790 に答える