html5では、移動、拡大縮小、回転などのさまざまなグラフィック変換を実現できます。行列法と関数法という 2 つの方法があり、これら 2 つの方法を使用して平行移動、拡大縮小、回転をどのように実現できるかを以下に説明します。
1. 翻訳:context.fillRect(50,50,50,50); context.translate(100,100); context.fillRect(50,50,50,50);
まず、この記事で紹介されているメソッドはすべて状態値です。つまり、そのスコープはその下のすべてのコードに影響します。また、
と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);
の場合、サイズは 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.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中文网(m.sbmmt.com)!