drawImage函數繪製圖片有哪些方法

drawImage函數繪製圖片有三種方法分別為：按原始圖片的大小進行繪製、按照指定的大小進行繪製、通用方法一般可用於圖片裁剪

今天將介紹canvas中的drawImage函數的用法，具有一定的參考作用，希望對大家有幫助

#【推薦課程：HTML5教程】

drawImage函數是HTML5中的一個新元素canvas標籤中的一個方法，它主要是用於畫圖、合成圖象、或做簡單的動畫等

drawImage()方法有三種形式實現繪圖的效果

方法一：

第一種方法就是將整個圖像複製到畫布，並將其放置到指定點的左上角，並且將每個影像像素映射成畫布座標系統的單元。即將按原始圖片的大小進行繪製

drawImage(image, x, y)

範例：將圖像相對於左上角的位置來畫在畫布上

<script>
var myImage=document.getElementById("myCanvas");
var cxt=myImage.getContext("2d");
var img=new Image();
img.src="images/22.jpg";
 img.onload=function(){
cxt.drawImage(img,150,150);
cxt.drawImage(img,250,250);
}
</script>

效果圖：

方法二：

#第二種方法雖然也是將整個影像複製到畫布中，但是它允許我們用畫布單位來指定想要的圖像的寬度和高度。

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

範例：設定影像的尺寸

<script>
var myImage=document.getElementById("myCanvas");
var cxt=myImage.getContext("2d");
var img=new Image();
img.src="images/22.jpg";
 img.onload=function(){
cxt.drawImage(img,150,150,100,100);
cxt.drawImage(img,250,250,100,100);
}
</script>

效果圖：

方法三：

第三種方法是完全通用，它允許我們指定圖像的任何矩形區域並複製它，以及對畫布中的任何位置都可進行任何的縮放

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

範例：對圖片進行裁切

<script>
var myImage=document.getElementById("myCanvas");
var cxt=myImage.getContext("2d");
var img=new Image();
img.src="images/22.jpg";
 img.onload=function(){
cxt.drawImage(img,20,30,50,50,25,25,100,100);
cxt.drawImage(img,115,115,100,100,125,125,200,200);
}
</script>

效果圖：

#總結：以上就是drawImage函數的用法了，希望透過這篇文章可以幫助大家學會drawImage函數的方法。

以上是drawImage函數繪製圖片有哪些方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！