Canvas入門基礎(chǔ)（四）：圖像繪制

<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)：

1. 第一種 基礎(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);
  }

2. 第二種 縮放

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

前面三個(gè)參數(shù)和第一個(gè)方法的含義相同，不過，這個(gè)方法多了2個(gè)參數(shù)：width 和 height，這兩個(gè)參數(shù)用來控制 當(dāng)像canvas畫入時(shí)應(yīng)該縮放的大小

例子：

var img=new Image();
  img.src="canvas_girl.jpg";
  img.onload=function(){
    cxt.drawImage(img,10,10,100,100);
  }

3. 第三種 切片

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);
  }