例えば、以下のような写真があります
写真の幅と高さは1280x600,并且transform属性是transform: translate(6px, 6px) scale(1.5) rotate(100deg);
1280x600
transform
transform: translate(6px, 6px) scale(1.5) rotate(100deg);
すみません、私が作成した1280x600的canvas画布，要怎样才能让图片按照transfromのパラメータをキャンバス上で変換するにはどうすればよいですか?
transfrom
キャンバスの最終的なサイズは変わりません。
人生最曼妙的风景，竟是内心的淡定与从容！
これら 3 つの API は、canvas 上の ctx オブジェクトで利用できます。ただし、1 つのことに注意する必要があります。 Canvas の変換は、CSS のtransform-origin:0,0 と同様の原点変換です。属性ですが、CSSの変換属性です。デフォルトはcenter centerですつまり、これには、howアンカーポイントを移動する方法と呼ばれる、キャンバス上の比較的古典的な問題が含まれます。簡単に言うと、キャンバスのtransformの負の値を使用して行われます。モバイル タイピングではそれを実証することはできません。
これはポスターの簡単なメソッドです。このとき、ポスターは画像の変換原点を 0,0 に設定します。このとき、前の効果を実現するパラメータはキャンバスの値とまったく同じになります。
https://github.com/wanadev/pe... デモ http://www.html5.jp/test/pers... これは役立つかもしれません
この質問に対する答えはすでに見つかりました。答えてくれた @foreignjack に感謝します/q/10...
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
これら 3 つの API は、canvas 上の ctx オブジェクトで利用できます。ただし、1 つのことに注意する必要があります。 Canvas の変換は、CSS のtransform-origin:0,0 と同様の原点変換です。属性ですが、CSSの変換属性です。デフォルトはcenter centerですつまり、これには、howアンカーポイントを移動する方法と呼ばれる、キャンバス上の比較的古典的な問題が含まれます。簡単に言うと、キャンバスのtransformの負の値を使用して行われます。モバイル タイピングではそれを実証することはできません。
これはポスターの簡単なメソッドです。このとき、ポスターは画像の変換原点を 0,0 に設定します。このとき、前の効果を実現するパラメータはキャンバスの値とまったく同じになります。
外で音が出ないコンピューターについて理解できない場合は、戻ってから実装をお手伝いします。ただし、成長の観点から、上記のリンクに従って実装コードを自分で書くことをお勧めします。https://github.com/wanadev/pe...
デモ http://www.html5.jp/test/pers...
これは役立つかもしれません
この質問に対する答えはすでに見つかりました。答えてくれた @foreignjack に感謝します
/q/10...