ご存知のとおり、キャンバスはビットマップであり、その中で必要なものをレンダリングできますが、編集できるのはキャンバスのプロパティを操作することだけです。つまり、キャンバスに描かれたものを操作することはできません。たとえば、キャンバスに絵を追加し、その絵を 10 ピクセル移動したい場合、絵をまったく取得できないため、絵を直接操作することはできません。あらゆる情報。取得できるのは Canvas オブジェクトだけです。
ここで質問になりますが、画像を回転するにはどうすればよいでしょうか?実際、canvas には、canvas を制御するためのさまざまなインターフェイスが用意されており、回転させるためのrotate() メソッドがあります。
実際、ここでの回転は実際にはキャンバスを回転させません。たとえば、ctx.rotate(Math.PI/2) は 90 度回転します。これは、ページ上でキャンバスが 90 度回転して表示されるという意味ではありません。キャンバスは実際には 2 つの部分で構成されていることがわかります。1 つは肉眼で見えるキャンバスで、もう 1 つは操作に使用される仮想キャンバスです。仮想キャンバス上のすべてのアクションは実際のキャンバスにマッピングされます。
わかりにくいかもしれないので、図を使って説明しましょう。まず、キャンバスを回転し、キャンバスの原点をデフォルトで左上隅に回転させるメソッドを紹介します。
45°回転の効果を見てみましょう。
ここでは、先ほど述べた仮想キャンバスが 45 度回転され、その仮想キャンバスに画像が挿入されていることがわかります。そして、実際のキャンバスが示すのは、仮想キャンバスと実際のキャンバスの交差点です。ここはわかりにくいかもしれませんが、よく考えてください。
2 つの画像のコードは次のとおりです。
// 回転しない var img = document.getElementById('img')var Canvas = document.getElementById('canvas')var ctx = Canvas.getContext(2d)ctx.drawImage(img, 0, 0)// 反時計回りに 45°回転var img = document.getElementById('img')var Canvas = document.getElementById('canvas')var ctx = Canvas.getContext(2d)ctx.rotate(-Math.PI / 4);ctx.drawImage(img, 0, 0)これを見ると、誰もが基本的にrotate()の使い方を知っていると思います。
画像の中心を回転させる方法について話しましょう
キャンバスの他の 2 つのメソッドの使用方法について説明します。
ctx.translate(x, y): このメソッドは、キャンバスの原点を移動できるメソッドです。パラメータは x と y です。
ctx.drawImage(img, x, y): このメソッドは上で使用されていますが、3 つのパラメーターがあります。最初の 1 つは挿入される画像の dom で、次の 2 つの x と y は img のパラメーターです。画像を挿入すると位置が変更されます。
画像からわかるように、画像の中心を中心に45度回転したい場合は、キャンバスの原点を画像の中心に移動してからキャンバスを回転し、画像を挿入するときに、画像を画像自体の半分だけ左上隅に移動します。
ここには 3 つのステップがあります。
これら 3 つのステップを個別に見てみましょう (画像の幅と高さは 400 と 300)
キャンバスの原点を移動する
var img = document.getElementById('img')var Canvas = document.getElementById('canvas')var ctx = Canvas.getContext(2d)ctx.translate(200, 150)ctx.drawImage(img, 0, 0)キャンバスを回転する
var img = document.getElementById('img')var Canvas = document.getElementById('canvas')var ctx = Canvas.getContext(2d)ctx.translate(200, 150)ctx.rotate(-Math.PI / 4) ctx.drawImage(img, 0, 0)画像を挿入して移動する
var img = document.getElementById('img')var Canvas = document.getElementById('canvas')var ctx = Canvas.getContext(2d)ctx.translate(200, 150)ctx.rotate(-Math.PI / 4) ctx.drawImage(img, -200, -150)これで完了です
ps: 一連の操作が完了したら、全員がキャンバスの原点を回転して復元する必要があります。そうしないと、一連の操作後にキャンバスの設定が台無しになってしまいます。各操作後に設定を元の状態に戻すだけです。
var img = document.getElementById('img')var Canvas = document.getElementById('canvas')var ctx = Canvas.getContext(2d)ctx.translate(200, 150) // 1ctx.rotate(-Math.PI / 4) // 2ctx.drawImage(img, -200, -150)//設定を復元します (復元する手順は、変更した手順を逆に行う必要があります) ctx.rotate(Math.PI / 4) // 1ctx.translate(-200, -150) // 2// その後、キャンバスは左上の角度に戻り、回転角度は0になります//その他の操作...もう 1 つ注意すべき点は、今示したのは、キャンバスに対する画像の x 軸と y 軸が 0 である例であるということです。0 でない場合は、原点を移動するだけです ctx.translate(200+x, 150+y）。ここでの 200 と 150 は画像の幅と高さの半分で、x と y はキャンバスに対する画像の x と y です。
この記事では画像の中心の回転についてのみ説明します。画像の回転と拡大縮小については後ほど書きます。書き方が悪い、間違っている等ありましたらご指摘ください。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。