關於html5如何在canvas中插入圖片的範例詳解-H5教程-PHP中文網

關於html5如何在canvas中插入圖片的範例詳解

黄舟

發布： 2018-05-26 16:09:14

原創

8001 人瀏覽過

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(&#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如何在canvas中插入圖片的範例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！