HTML5 Canvas 事前学習メモ (6) - 変換

html5では、移動、拡大縮小、回転などのさまざまなグラフィック変換を実現できます。行列法と関数法という 2 つの方法があり、これら 2 つの方法を使用して平行移動、拡大縮小、回転をどのように実現できるかを以下に説明します。

1. 翻訳:

 context.fillRect(50,50,50,50);
 context.translate(100,100);
 context.fillRect(50,50,50,50);

中間文がない場合、最初の長方形と 2 番目の長方形が重なっているため、表示される効果は 1 つの長方形のみになります。現在の効果は翻訳であり、効果は次のとおりです。

まず、この記事で紹介されているメソッドはすべて状態値です。つまり、そのスコープはその下のすべてのコードに影響します。また、

save

とrestoreを使用することもできます。ストアとポップの状態。上記の導入は、変換問題を解決するための関数を呼び出すことです。行列メソッドを以下に紹介します。これには 6 つのパラメーターがあります。さまざまな操作を担当するために、これら 6 つのパラメータを全体として紹介したいと思います。つまり、これらのパラメータがさまざまな変換、スケーリング、回転を担当することになります。最初の 4 つのパラメータはスケーリングと回転を担当し、最後の 2 つのパラメータは移動を担当し、最初の 4 つのパラメータ 1、4 は 1 つのグループ、2、3 です。 1 つのグループ、1と2はxの値、3と4はyの値です、5 と 6 は、それぞれ x,y です。 の翻訳について、上記のコードが行列を使用している場合、次のように記述する必要があります:

context.fillRect(50,50,50,50);
context.transform(1,0,0,1,100,100);
//context.transform(0,1,1,0,100,100);
context.fillRect(50,50,50,50);

ここでのコードの 2 番目の文は同じ意味です。コードが 3 番目の文でコメントアウトされているように、1、 4 に含める必要がある理由は、次のことを行うためです。長方形が

0

の場合、サイズは 0 に拡大縮小されないことを確認します。 2. Zoom

 context.fillRect(50,50,50,50);
 context.translate(150,50);
 context.scale(0.5,0.5);
 context.fillRect(0,0,50,50);

以下のコードを書くと問題が発生するためです

context.fillRect(50,50,50,50);
 context.scale(0.5,0.5);
 context.fillRect(150,50,50,50);

このコードは上記のコードと同じように見えますが、実際は同じです。 context.scaleを呼び出すと、すべての座標がスケーリングされ、元のサイズの半分になるため、効果は以下のものとは異なります以下は、最初と2番目の比較です。コードの段落: 後者の図は位置がずれていることがわかります。

以下はマトリックスメソッドの紹介です:

context.fillRect(50,50,50,50);
context.transform(0,0.5,0.5,0,150,50);
//context.transform(0.5,0,0,0.5,150,50);
context.fillRect(0,0,50,50);

上記と同じ、コードをコメントアウトした効果は同じです、同じです、最初に同じ、最初のパラメータと4番目のパラメータを変換する必要がありますこのグループのパラメータは 2 番目と同じです。3 番目のパラメータは同じです。

3. 回転

context.fillRect(50,50,50,50);
 context.translate(150,50);
 context.rotate(Math.PI/4);
 context.fillRect(0,0,50,50);

同じ理由で、回転角度もラジアン単位で変換する必要があります。

下面介绍的是使用矩阵法：

context.fillRect(50,50,50,50);
context.transform(Math.cos(Math.PI/4),Math.sin(Math.PI/4),-Math.sin(Math.PI/4),Math.cos(Math.PI/4),150,50);
//context.transform(-Math.sin(Math.PI/4),Math.cos(Math.PI/4),Math.cos(Math.PI/4)
//,Math.sin(Math.PI/4),150,50);
context.fillRect(0,0,50,50);

两组参数分别为cos旋转角，sin旋转角，负的sin旋转角，cos旋转角，或者为负的sin旋转角，cos旋转角，cos旋转角，sin旋转角。

如有错误，希望大家多多指正

 以上就是Html5 Canvas初探学习笔记(6) -变换的内容，更多相关内容请关注PHP中文网（www.php.cn）！