この記事で使用する主な知識

この記事では、次に示すように、主に Canvas API のdrawImage メソッドを使用します。以下に、このメソッドを簡単に紹介します。

Canvas API で画像を描画するには、drawImage メソッドを使用します。これは、次のように定義されたオーバーロードメソッドです。最初のメソッドには 3 つのパラメータがあり、最初のパラメータは画像です。 (ビデオ要素も可能)、x と y はキャンバス内の画像の開始座標です。2 番目のメソッドには 5 つのパラメーターがあり、最初の 3 つは最初のメソッドと同じ意味を持ち、w と h は参照します。 3 番目のメソッドには 9 つのパラメータがあり、最後の 8 つのパラメータのうち最初の 4 つは画像のスケーリングに使用されます。ソース画像.長方形の場合、最後の 4 つのパラメータはキャンバス上に長方形を定義するために使用されます。メソッド全体の機能は、ソース画像の一部 (2 番目から 5 番目のパラメータで定義された部分) をキャンバス (その部分) にコピーすることです。最後の 4 つのパラメータで定義されます)

この記事では主に 3 番目のメソッドを使用して描画を完了します

ソースコード

context.drawImage(image,x,y);
context.drawImage(image,x,y,w,h);
context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);

ログイン後にコピー

コード分析

: その効果は主に左から右に表示することです。 4番目のパラメータと8番目のパラメータは0から徐々に画像の幅に増加します

drawtopToBottom(): 効果は上から下に表示し、主に5番目と9番目のパラメータを0から画像の高さまで増加させます

drawhcenter (): 効果は、ディスプレイの中央から両側に水平に表示することであり、主に 2 番目と 6 番目のパラメーターを画像幅の半分から 0 に減らし、4 番目と 8 番目のパラメーターを 0 から画像幅まで増やします

Drawvcenter() : 効果は前と同様に中央から両側に表示します

drawhwindow(): 効果は水平ブラインドで、原理は複数の場所から実行されることを除いてdrawhcenterメソッドと似ています

drawvwindow (): 効果は垂直ブラインドであり、原理はdrawvcenterメソッドと似ていますが、複数の場所から実行される点が異なります

drawhvwindow(): 効果はブラインドであり、drawhwindow()とdrawvwindow()の組み合わせです

皆さんも追加や改善を歓迎します

写真は他のウェブサイトに掲載されているため、比較のために読み込みが遅く、表示があまりスムーズではありません。この

マップ

を使用すると、より良い結果が得られます。

以上がHTML5 プログラミング実践パート 2 - アニメーションを使用して画像コードのケースを切り替えるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。