canvas是HTML5中的一個新元素，這個元素可以通過JavaScript用來繪制圖形。例如可以用它來畫圖、合成圖象、做一些動畫等。

　　通常呢，我們在canvas上畫圖的方法是使用Image對象。基本上一些典型的圖片格式(png，jpg，gif等都沒有問題。好，那接下來我們就來使用它。

1  var canvas=document.getElementById("game_canvas");
2  var cxt=image.getContext("2d");
3  var image=new Image();
4  img.src="./res/background.jpg";

　　這是在我一個最近項目的代碼的部分，為了將這張背景圖片渲染到canvas中，得使用drawImage方法，說到這個方法，它的格式如下：

drawImage(image,sx,sy,sWidth,sHeight,x,y,width,height);

　　第一個參數是要裁剪的圖片對象，s代表src。sx,sy是圖片開始裁剪的起點，sWidth和sHeight是圖片裁剪的大小，值得一提的是，我嘗試用了百分比，發現並不行。後面的x,y就是裁剪後圖片的左上角距離canvas左上角的位置，width和height代表縮放後的大小。這貨貌似只接受像素作為單位，比如下面這張圖片，大小為800*600。

　　我對它進行如下這波操作：

ctx.drawImage(image,0,0,image.width,image.height,0,0,200,400);

　　首先我將它完整地裁剪了下來，然後縮放改為200,400，到瀏覽器一測量，它就變成了

　　就是說它把寬高強制縮放成了200*400，哪怕這張圖已經變形了。

Canvas的drawImage方法使用