HTML5 キャンバス 画像を回転させる
jQuery('#carregar').click(function(){
var canvas = document.getElementById('canvas');
var image = document.getElementById('image');
var element = canvas.getContext("2d");
element.clearRect(0, 0, canvas.width, canvas.height);
element.drawImage(image, 0, 0, 300, 300);
});
[jsfiddle.net/braziel/nWyDE/](http://jsfiddle.net/braziel/nWyDE/)
画像を右または左に90 ° 回転させる問題があります。
私はキャンバスに画像を使用し、同じ画面は、例と同じようにいくつかのキャンバスを持つことになりますが、私はプロジェクトにできるだけ近いままにしました。
質問ですが、"左回転"と"右回転"をクリックすると、画像が左右に90 ° 回転するのですが、どうすればよいでしょうか?
インターネットでいくつかのコードを試したが、どれもうまくいかなかった。
61
8
Canvasのcontext.translate & context.rotateで画像を回転させることができます。
指定した角度だけ回転させた画像を描画する関数を紹介します:
以下はコードとFiddleです: http://jsfiddle.net/m1erickson/6ZsCz/
Quickest 2Dコンテキスト画像回転方法。
汎用画像の回転、位置、スケール。
回転点を制御する場合は、次の機能を使用します。
2Dコンテキスト変換をリセットします。
したがって、画像を左に(反時計回りに)90度回転させます。
したがって、画像を右(時計回り)に90度回転させます。
例描画500の画像が回転スケールで変換されました。
。
。
もう一つの解決策は、正方形の画像に効果的です。ここでは、どのような寸法の画像にも対応できる解決策を紹介します。画像の一部が切り取られる可能性のある他の方法よりも、キャンバスは常に画像にフィットします。
http://jsfiddle.net/6ZsCz/1588/
これは、回転およびスケーリングされた画像を描画するための最も単純なコードです。
@markEが彼の答えで言及しているように。
コンテキストの保存と復元よりもはるかに高速です。
これが[例][2]です。
これは私がやったことです。
使用方法について
HTML
ページ全体で実行してみませんか。 ページ負荷時にすべての画像を検出して、それらすべてを連続的に回転させます。
すべてのアクションが始まるApp.start_Actionをチェックしてください。 HTMLは次のとおりです。
回転を重ねるオプション、境界線も追加されます。
これはフル度の画像回転コードです。 jsfiddleで以下のサンプルアプリを確認することをお勧めします。
https://jsfiddle.net/casamia743/xqh48gno/。
[。![ここに画像の説明を入力してください][1]][1]。
このサンプルアプリのプロセスフローはです。
1。 画像を読み込み、boundaryRadを計算します。 2。 一時的なキャンバスを作成します。 3。 キャンバスコンテキストの原点を投影された直線の共同位置に移動します。 4。 入力度量でキャンバスコンテキストを回転させます。 5。 canvas.toDataURLメソッドを使用して、イメージブロブを作成します。 6。 画像blobを使用して、新しい画像要素を作成し、レンダリングします。