drawImage関数を使って画像を描画する方法にはどのようなものがありますか?

drawImage関数 絵を描くには3つの方法があります:元の絵のサイズに従って描く、指定されたサイズに従って描く、そして一般的な方法は一般的に絵のトリミングに使用できます

今日はCanvas にdrawImage 関数を導入します。使用法には一定の参考効果があります。皆様のお役に立てば幸いです。

[推奨コース: HTML5 チュートリアル]

drawImage 関数は、HTML5 の新しい要素である Canvas タグ内のメソッドで、主に描画、画像の合成、簡単なアニメーションなどに使用されます。

drawImage() 描画効果を実現するには 3 つの方法があります。

方法 1:

最初の方法は、全体をコピーすることです。画像をキャンバスに配置し、指定された点に配置し、各画像ピクセルをキャンバス座標系の単位にマップします。元の画像のサイズに応じて描画されます

drawImage(image, x, y)

例: 左上隅の位置を基準にしてキャンバス上に画像を描画します

<script>
var myImage=document.getElementById("myCanvas");
var cxt=myImage.getContext("2d");
var img=new Image();
img.src="images/22.jpg";
 img.onload=function(){
cxt.drawImage(img,150,150);
cxt.drawImage(img,250,250);
}
</script>

レンダリング:

方法 2:

2 番目の方法でも画像全体をキャンバスにコピーしますが、画像の希望の幅と高さをキャンバス単位で指定できます。

drawImage(image, x, y, width, height)

例: 画像のサイズを設定します

<script>
var myImage=document.getElementById("myCanvas");
var cxt=myImage.getContext("2d");
var img=new Image();
img.src="images/22.jpg";
 img.onload=function(){
cxt.drawImage(img,150,150,100,100);
cxt.drawImage(img,250,250,100,100);
}
</script>

レンダリング:

# # 方法 3:

3 番目の方法は完全に汎用的で、画像の任意の長方形領域を指定してコピーしたり、キャンバス内の任意の位置に拡大縮小したりすることができます

drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight)

例: 画像をトリミング

<script>
var myImage=document.getElementById("myCanvas");
var cxt=myImage.getContext("2d");
var img=new Image();
img.src="images/22.jpg";
 img.onload=function(){
cxt.drawImage(img,20,30,50,50,25,25,100,100);
cxt.drawImage(img,115,115,100,100,125,125,200,200);
}
</script>

レンダリング:

概要: 上記はこの記事が、drawImage 関数の使い方の学習に役立つことを願っています。

以上がdrawImage関数を使って画像を描画する方法にはどのようなものがありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。