JavaScript - キャンバス上の画像を変換するには?

Question

例えば、以下のような写真があります

リーリー

写真の幅と高さは1280x600,并且transform属性是transform: translate(6px, 6px) scale(1.5) rotate(100deg);

すみません、私が作成した1280x600的canvas画布，要怎样才能让图片按照transfromのパラメータをキャンバス上で変換するにはどうすればよいですか?

キャンバスの最終的なサイズは変わりません。

Answer 1

これら 3 つの API は、canvas 上の ctx オブジェクトで利用できます。ただし、1 つのことに注意する必要があります。 Canvas の変換は、CSS のtransform-origin:0,0 と同様の原点変換です。属性ですが、CSSの変換属性です。デフォルトはcenter centerですつまり、これには、howアンカーポイントを移動する方法と呼ばれる、キャンバス上の比較的古典的な問題が含まれます。簡単に言うと、キャンバスのtransformの負の値を使用して行われます。モバイル タイピングではそれを実証することはできません。

これはポスターの簡単なメソッドです。このとき、ポスターは画像の変換原点を 0,0 に設定します。このとき、前の効果を実現するパラメータはキャンバスの値とまったく同じになります。

外で音が出ないコンピューターについて理解できない場合は、戻ってから実装をお手伝いします。ただし、成長の観点から、上記のリンクに従って実装コードを自分で書くことをお勧めします。

Answer 2

https://github.com/wanadev/pe...
デモ http://www.html5.jp/test/pers...
これは役立つかもしれません

Answer 3

この質問に対する答えはすでに見つかりました。答えてくれた @foreignjack に感謝します
/q/10...