html5でキャンバスに画像を挿入する例を詳しく解説

キャンバスの読み込み...

キャンバスに画像を表示するのは非常に簡単です。画像にスタンプを追加したり、画像を引き伸ばしたり、修正レイヤーを使用して画像を変更したりすることができ、通常は画像がキャンバス上のフォーカスになります。 HTML5 Canvas API に組み込まれたいくつかの簡単なコマンドを使用して、画像コンテンツをキャンバスに簡単に追加できます。

ただし、画像を使用するとキャンバスの操作が複雑になります。画像を操作するには、画像が完全にロードされるまで待つ必要があります。ブラウザは通常、ページ スクリプトの実行中に画像を非同期で読み込みます。イメージが完全に読み込まれる前にキャンバスにレンダリングしようとすると、キャンバスにはイメージが表示されません。したがって、開発者は、レンダリング前にイメージがロードされていることを確認するために特別な注意を払う必要があります。

レンダリング前に画像が完全にロードされていることを確認するために、コールバックを提供します。つまり、以下のコード リストに示すように、後続のコードは画像がロードされたときにのみ実行されます。

<script type="text/javascript">
function drawBeauty(beauty){
var mycv = document.getElementById("cv");  
var myctx = mycv.getContext("2d");
myctx.drawImage(beauty, 0, 0);
}
function load(){
var beauty = new Image();  
beauty.src = "http://images.cnblogs.com/cnblogs_com/html5test/359114/r_test.jpg"; 
if(beauty.complete){
   drawBeauty(beauty);
}else{
   beauty.onload = function(){
     drawBeauty(beauty);
   };
   beauty.onerror = function(){
     window.alert(&#39;美女加载失败，请重试&#39;);
   };
};   
}//load
if (document.all) {
  window.attachEvent(&#39;onload&#39;, load);  
  }else {  
  window.addEventListener(&#39;load&#39;, load, false);
  }
</script>

基本的な描画

最も基本的な描画操作で必要なのは、画像を表示する位置 (x 座標と y 座標) だけです。画像の位置は、左上隅を基準にして判断されます。この方法を使用すると、画像を元のサイズでキャンバス上に簡単にペイントできます。

drawImage(image, x, y)
var canvas = document.getElementById(‘myCanvas’);
var ctx = canvas.getContext(’2d’);
ctx.drawImage(myImage, 50, 50);
ctx.drawImage(myImage, 125, 125);
ctx.drawImage(myImage, 210, 210);

拡大縮小とサイズ変更

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

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

var canvas = document.getElementById(‘myCanvas’);
var ctx = canvas.getContext(’2d’);ctx.drawImage(myImage, 50, 50, 100, 100);
ctx.drawImage(myImage, 125, 125, 200, 50);
ctx.drawImage(myImage, 210, 210, 500, 500);

画像のトリミング

最後のdrawImageメソッドは、画像をトリミングするために使用されます。

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

パラメータはたくさんありますが、基本的には元の画像から長方形の領域を取得し、それをキャンバス上の対象領域に描画すると考えることができます。

以上がhtml5でキャンバスに画像を挿入する例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。