ホームページ > ウェブフロントエンド > H5 チュートリアル > Html5 Canvas 予備学習メモ (13) - 画像変換

Html5 Canvas 予備学習メモ (13) - 画像変換

黄舟
リリース: 2017-02-28 16:09:01
オリジナル
1275 人が閲覧しました

シャオマン(ビルマン)個人オリジナル創作、転載大歓迎、転載用アドレスを明記してください、シャオマン(ビルマン)コラムアドレス http://www.php.cn/

前回の操作のステータス値グラフィックス変換は、描画時にスケーリングなどの操作を実装することもできますが、1. 画像のパンニングの効果は次のとおりです。

コードは次のとおりです:

var image = new Image();
image.src = "grossini.png";
image.onload = function(){
   context.drawImage(image,50,50);
   context.translate(100,100);
   context.drawImage(image,50,50);
}
ログイン後にコピー

グラフィックス操作と同様に、変換後、与えられた座標値はそれに応じてオフセットされます。同じことは、行列メソッドを使用して実現することもできます。コードは次のとおりです。

var image = new Image();
image.src = "grossini.png";
image.onload = function(){
   context.drawImage(image,50,50);
   context.transform(1,0,0,1,100,100);
   //context.transform(0,1,1,0,100,100);
   context.drawImage(image,50,50);
}
ログイン後にコピー
同様に、書き出される
transform

の効果は、書き出されない

transform

と同じです。 全体として、最初の 4 つのパラメーターはスケーリングと変換を担当します。回転、最後の 2 つのパラメータは Translation、最初の 4 つのパラメータ

1

4 はスケーリングを制御するグループ、23 は回転を制御するグループ、 12xの値、34yの値です、56はそれぞれx,y翻訳であり、1423を書く理由です。 は私たちがそうしたいからです四角形がスケーリングされていないことを確認します。 0 の場合、サイズは 0 にスケーリングされます。 2. 画像をズームする効果は次のとおりです: コードは次のとおりです:

image.onload = function(){
   context.drawImage(image,50,50);
   context.translate(150,50);
   context.scale(0.5,0.5);
   context.drawImage(image,0,0);
}
ログイン後にコピー
同様に、スケーリング後は、翻訳とズームを調整する必要があります。座標位置もそれに応じてスケーリングされます。マトリックス メソッドを使用して、対応する操作を実装することもできます。

image.onload = function(){
   context.drawImage(image,50,50);
   context.transform(0.5,0,0,0.5,150,50);
   context.drawImage(image,0,0);
}
ログイン後にコピー

は、

1

4


0.5.

3 をスケーリングする 2 つのパラメータです。

を反時計回りに回転すると、効果は次のようになります:

コードは次のように:

context.drawImage(image,50,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.drawImage(image,0,0);
ログイン後にコピー
2 セットのパラメータは、負の

sin

回転角、

cos

回転角、

cos


回転角、

sin

回転角です。 時計回りに回転すると、効果は次のようになります: コードは次のとおりです;

context.drawImage(image,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.drawImage(image,0,0);
ログイン後にコピー

两组参数分别为cos旋转角,sin旋转角,负的sin旋转角,cos旋转角。

 以上就是Html5 Canvas初探学习笔记(13) -图片变换的内容,更多相关内容请关注PHP中文网(www.php.cn)!



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