検索

ホームページ  >  に質問  >  本文

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

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

リーリー

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

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

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

黄舟黄舟2791日前500

全員に返信(3)返信します

  • 高洛峰

    高洛峰2017-05-16 13:25:58

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

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

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

    返事
    0
  • 仅有的幸福

    仅有的幸福2017-05-16 13:25:58

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

    返事
    0
  • 伊谢尔伦

    伊谢尔伦2017-05-16 13:25:58

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

    返事
    0
  • キャンセル返事