html5在canvas中插入圖片

 canvas loading...

在canvas中顯示圖片非常簡單。可以通過修正層為圖片添加印章、拉伸圖片或者修改圖片等，並且圖片通常會成為canvas上的焦點。用HTML5 Canvas API內置的幾個簡單命令可以輕松地為canvas添加圖片內容。

不過，圖片增加了canvas操作的復雜度：必須等到圖片完全加載后才能對其進行操作。瀏覽器通常會在頁面腳本執行的同時異步加載圖片。如果試圖在圖片未完全加載之前就將其呈現到canvas上，那么canvas將不會顯示任何圖片。因此，開發人員要特別注意，在呈現之前，應確保圖片已經加載完畢。

為保證在呈現之前圖片已完全加載，我們提供了回調，即僅當圖像加載完成時才執行后續代碼，如代碼清單如下所示。

<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('美女加載失敗，請重試');
   };
};   
}//load
if (document.all) {
  window.attachEvent('onload', load);  
  }else {  
  window.addEventListener('load', 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 )

參數很多，但基本上你可以把它想成從原圖中取出一個矩形區域，然后把它畫到畫布上目標區域里。