例えば、以下のような写真があります
リーリー写真の幅と高さは1280x600
,并且transform
属性是transform: translate(6px, 6px) scale(1.5) rotate(100deg);
すみません、私が作成した1280x600
的canvas画布,要怎样才能让图片按照transfrom
のパラメータをキャンバス上で変換するにはどうすればよいですか?
キャンバスの最終的なサイズは変わりません。
高洛峰2017-05-16 13:25:58
これら 3 つの API は、canvas 上の ctx オブジェクトで利用できます。ただし、1 つのことに注意する必要があります。 Canvas の変換は、CSS のtransform-origin:0,0 と同様の原点変換です。属性ですが、CSSの変換属性です。デフォルトはcenter centerですつまり、これには、howアンカーポイントを移動する方法と呼ばれる、キャンバス上の比較的古典的な問題が含まれます。簡単に言うと、キャンバスのtransformの負の値を使用して行われます。モバイル タイピングではそれを実証することはできません。
これはポスターの簡単なメソッドです。このとき、ポスターは画像の変換原点を 0,0 に設定します。このとき、前の効果を実現するパラメータはキャンバスの値とまったく同じになります。
外で音が出ないコンピューターについて理解できない場合は、戻ってから実装をお手伝いします。ただし、成長の観点から、上記のリンクに従って実装コードを自分で書くことをお勧めします。仅有的幸福2017-05-16 13:25:58
https://github.com/wanadev/pe...
デモ http://www.html5.jp/test/pers...
これは役立つかもしれません