html 5 canvasに画像を挿入

canvas loading...
canvasに画像を表示するのは簡単です.修正レイヤによって画像に印鑑を追加したり、伸ばしたり、画像を修正したりすることができ、画像は通常canvas上の焦点になります.HTML 5 Canvas APIに内蔵されたいくつかの簡単なコマンドで簡単にcanvasに画像コンテンツを追加できます.
ただし、画像はcanvas操作の複雑さを増しています.画像が完全にロードされてから操作する必要があります.ブラウザは通常、ページスクリプトが実行されると同時に画像を非同期でロードします.画像が完全にロードされない前にcanvasに表示しようとすると、canvasには画像は表示されません.そのため、開発者は、提示する前に、画像がロードされていることを確認することに特に注意してください.
プレゼンテーション前に画像が完全にロードされていることを保証するために、コードリストの下に示すように、画像のロードが完了した場合にのみ後続のコードを実行するコールバックを提供します.

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('      ，   ');
   };
};   
}//load
if (document.all) {
  window.attachEvent('onload', load);  
  }else {  
  window.addEventListener('load', load, false);
  }

 
基本的な描画
最も基本的なグラフィック操作では、画像が現れる位置(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
)
パラメータはたくさんありますが、基本的には原図から矩形の領域を取り出し、キャンバスのターゲット領域に描くことができます.
転載先:https://www.cnblogs.com/html5test/archive/2012/03/01/2375558.html