Canvas入门基础（四）：图像绘制

要绘制图像，我们首先要获得图像：
第一种：直接获取

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

2. 第二种 缩放

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

3. 第三种 切片

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