在canvas中绘制图像：
主要的JS代码逻辑是：
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
image = new Image();
image.src = 'timg.jpeg';
image.onload = function(e) {
context.drawImage(image,0,0);
}
代码中首先创建了一幅图像，设置了它的数据源，然后等待浏览器加载图片，在图片加载完成后，将其绘制于canvas的左上角。
这就是drawImage()最简单的用法。
采用这种方式，可以将一张未经缩放的图像绘制于canvas中，该方式唯一的缺点就是，你必须等待图像加载完毕之后才能将其进行绘制，如果在图片尚未完成加载时，就进行绘制，那么根据canvas规范，drawImage()方法的执行会失败，而且没有任何提示。
drawImage()方法会将一幅图像绘制到一个canvas中，所绘制的图像叫做“源图像”，而绘制到的地方则叫做“目标canvas”，以字母“s”开头的变量名代表源图像，以字母“d”开头的变量名则用于指标目标canvas。
drawImage()方法可以接受以下3套参数：
方法一：drawImage(image,dx,dy)
方法二：drawImage(image,dx,dy,dw,dh)
方法三：drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
方法一：会将整幅图像绘制在目标canvas中的指定位置上
方法二：会将图像完整地绘制到指定的位置上，然而，在绘制时会根据目标区域的宽度与高度进行缩放；
方法三：会将整幅图像或其一部分绘制到目标canvas指定位置上，而且在绘制时会根据目标区域的宽度与高度对图像进行绘制。
小技巧：
drawImage()方法的使用灵活，可以将一幅图像，一个canvas对象或一个视频帧的整体或某个部分绘制到canvas中。在绘制这些图像，canvas对象或视频帧的时候，可以任意指定其绘制位置及缩放比例。
效果图如下：