如何在ihtml5的canvas中插入圖片

這期內容當中小編將會給大家帶來有關如何在ihtml5的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 = "https://cache.yisu.com/upload/information/20200318/91/15348.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)

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

上述就是小編為大家分享的如何在ihtml5的canvas中插入圖片了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。