ホームページ > ウェブフロントエンド > H5 チュートリアル > HTML5 Canvas 事前学習メモ (6) - 変換

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

黄舟
リリース: 2017-02-28 15:38:59
オリジナル
1408 人が閲覧しました

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 つのパラメータ 14 は 1 つのグループ、23 です。 1 つのグループ、12xの値、34yの値です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中文网(m.sbmmt.com)!


関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート