要繪制圖像，我們首先要獲得圖像：
第一種：直接獲取
<img src="xxjpg" id="myimg"/>
<script>
var img=document.getElementById("myimg");
</script>
第二種：動(dòng)態(tài)創(chuàng)建
<script>
var img=new Image();
img.src="xx.jpg";
img.onload = function(){
// 等待圖片加載完畢后再執(zhí)行繪制
}
</script>
獲得了源圖對(duì)象，我們就可以使用 drawImage 方法將它渲染到 canvas 里。
drawImage 方法有三種形態(tài)：
第一種 基礎(chǔ)
drawImage(image, x, y)
image 是 image 或者 canvas 對(duì)象，x 和 y 是其在目標(biāo) canvas 里的起始坐標(biāo)。
例子：
var img=new Image();
img.src="canvas_girl.jpg";
img.onload=function(){
cxt.drawImage(img,10,10);
}
- 第二種 縮放
drawImage(image, x, y, width, height)
前面三個(gè)參數(shù)和第一個(gè)方法的含義相同，不過(guò)，這個(gè)方法多了2個(gè)參數(shù)：width 和 height，這兩個(gè)參數(shù)用來(lái)控制 當(dāng)像canvas畫(huà)入時(shí)應(yīng)該縮放的大小
例子：
var img=new Image();
img.src="canvas_girl.jpg";
img.onload=function(){
cxt.drawImage(img,10,10,100,100);
}
- 第三種 切片
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
第一個(gè)參數(shù)和其它的是相同的，都是一個(gè)圖像或者另一個(gè) canvas 的引用。其它8個(gè)參數(shù)中，前4個(gè)是定義圖像源的切片位置和大小，后4個(gè)則是定義切片的目標(biāo)顯示位置和大小。
例子：
var img=new Image();
img.src="canvas_girl.jpg";
img.onload=function(){
cxt.drawImage(img,120,40,80,80,10,10,80,80);
}
