HTML5 Canvas 描画のdrawImage() メソッドの詳細な紹介 (コード例)

この記事では、HTML5 Canvas 描画のdrawImage() メソッドについて詳しく紹介 (コード例) しています。一定の参考価値があります。困っている友人は参考にしてください。お役に立てれば幸いです。

は、グラフィックを描画するためにスクリプト言語 (通常は JavaScript) で使用できる新しい HTML 要素です。たとえば、これを使用して、絵を描いたり、画像を合成したり、単純な (それほど単純ではない) アニメーションを実行したりできます。

1. キャンバス上に描画する最も一般的な方法は、Image オブジェクトを使用することです。サポートされるソース画像形式はブラウザのサポートに依存しますが、いくつかの一般的な画像形式 (png、jpg、gif など) は基本的に問題ありません。
2. 以下のすべての例では、画像ソースはこの 200×200 サイズの画像を使用します。

#3. 絵を描く: 最も基本的な描画操作で必要なのは、画像を配置する位置 (x 座標と y 座標) だけです。現れる。画像の位置は、左上隅を基準にして判断されます。この方法を使用すると、 画像を元のサイズで キャンバス上に描画することができます。
4. コードは次のとおりです:

var myImage=document.getElementByIdx_x("myCanvas");

var cxt=myImage.getContext("2d");

var img=new Image();

img.src="200.jpg";

cxt.drawImage(img,50,50);

5. 画像の変形: 画像のサイズを変更するには、オーバーロードされたdrawImage 関数を使用し、目的の幅と高さのパラメーターを指定する必要があります。
6. コードは次のとおりです:

var myImage=document.getElementByIdx_x("myCanvas");

var cxt=myImage.getContext("2d");

var img=new Image();

img.src="200.jpg";

cxt.drawImage(img,50,50,100,100);

7. 画像のトリミング:drawImage メソッドの機能は画像をトリミングすることです。 drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,destX,destY,destWidth, destHeight)
8. パラメータはたくさんありますが、基本的には元の画像から長方形の領域を取得して描画すると考えることができます。キャンバス上のターゲット領域。
9. コードは次のとおりです:
var myImage=document.getElementByIdx_x("myCanvas");

var cxt=myImage.getContext("2d");

var img=new Image();

img.src="200.jpg";

cxt.drawImage(img,0,0,50,50,25,25,100,100);

cxt.drawImage(img,125,125,100,100,125,125,150,150);

10. これらは、HTML5 の Canvas タグでの画像の描画と処理の基本です。操作する。

1. #コラム
2. 記事詳細

                                                                    

赤いカエデの葉                                                                                          1                                                                                                                                                                                                著者をフォローする                                                                                        52分前に投稿

HTML5 キャンバス描画 DrawImage () メソッド

## javascript

## Html5

16 回読まれました                                                             読むのに5分かかります                                                                                                                                                                                                                                                                                                 

                                                                                

                                                                                                                                                                                                                                                                                                                                                                                  はじめに は、グラフィックを描画するためにスクリプト言語 (通常は JavaScript) で使用できる新しい HTML 要素です。たとえば、これを使用して、絵を描いたり、画像を合成したり、単純な (それほど単純ではない) アニメーションを実行したりできます。 1. キャンバス上に描画する最も一般的な方法は、Image オブジェクトを使用することです。サポートされるソース画像形式はブラウザのサポートに依存しますが、いくつかの一般的な画像形式 (png、jpg、gif など) は基本的に問題ありません。 2. 以下のすべての例では、画像ソースはこの 200×200 サイズの画像を使用します。




#3. 絵を描く: 最も基本的な描画操作で必要なのは、画像を配置する位置 (x 座標と y 座標) だけです。現れる。画像の位置は、左上隅を基準にして判断されます。この方法を使用すると、 画像を元のサイズで キャンバス上に描画することができます。
4. コードは次のとおりです:

var myImage=document.getElementByIdx_x("myCanvas");

var cxt=myImage.getContext("2d");

var img=new Image();

img.src="200.jpg";

cxt.drawImage(img,50,50);

5. 画像の変形: 画像のサイズを変更するには、オーバーロードされたdrawImage 関数を使用し、目的の幅と高さのパラメーターを指定する必要があります。
6. コードは次のとおりです:

var myImage=document.getElementByIdx_x("myCanvas");

var cxt=myImage.getContext("2d");

var img=new Image();

img.src="200.jpg";

cxt.drawImage(img,50,50,100,100);

7. 画像のトリミング:drawImage メソッドの機能は画像をトリミングすることです。 drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,destX,destY,destWidth, destHeight) 8. パラメータはたくさんありますが、基本的には元の画像から長方形の領域を取得して描画すると考えることができます。キャンバス上のターゲット領域。 9. コードは次のとおりです: var myImage=document.getElementByIdx_x("myCanvas");

var cxt=myImage.getContext("2d");

var img=new Image();

img.src="200.jpg";

cxt.drawImage(img,0,0,50,50,25,25,100,100);

cxt.drawImage(img,125,125,100,100,125,125,150,150);

10. これらは、HTML5 の Canvas タグでの画像の描画と処理の基本です。操作する。 ＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃報告＃＃＃＃＃＃＃＃＃＃＃＃＃

#いいね

|

# #コレクション

• |
0
• 興味があるかもしれません

# ＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃コメント＃＃＃                                                                                                     

デフォルトの並べ替え 時間順に並べ替え

読み込み中...

コメントをさらに表示

## ＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃コメントを投稿＃＃ ＃＃ ＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃

以上がHTML5 Canvas 描画のdrawImage() メソッドの詳細な紹介 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。