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中文網其他相關文章！
