要绘制图像，我们首先要获得图像：
第一种：直接获取
<img src="xxjpg" id="myimg"/>
<script>
var img=document.getElementById("myimg");
</script>
第二种：动态创建
<script>
var img=new Image();
img.src="xx.jpg";
img.onload = function(){
// 等待图片加载完毕后再执行绘制
}
</script>
获得了源图对象，我们就可以使用 drawImage 方法将它渲染到 canvas 里。
drawImage 方法有三种形态：
第一种 基础
drawImage(image, x, y)
image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。
例子：
var img=new Image();
img.src="canvas_girl.jpg";
img.onload=function(){
cxt.drawImage(img,10,10);
}
- 第二种 缩放
drawImage(image, x, y, width, height)
前面三个参数和第一个方法的含义相同，不过，这个方法多了2个参数：width 和 height，这两个参数用来控制 当像canvas画入时应该缩放的大小
例子：
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)
第一个参数和其它的是相同的，都是一个图像或者另一个 canvas 的引用。其它8个参数中，前4个是定义图像源的切片位置和大小，后4个则是定义切片的目标显示位置和大小。
例子：
var img=new Image();
img.src="canvas_girl.jpg";
img.onload=function(){
cxt.drawImage(img,120,40,80,80,10,10,80,80);
}
