javascript基础学习系列五百六十四：绘制图像

2D 绘图上下文内置支持操作图像。如果想把现有图像绘制到画布上，可以使用drawImage()方法。
这个方法可以接收3 组不同的参数，并产生不同的结果。最简单的调用是传入一个HTML 的元素，
以及表示绘制目标的x 和y 坐标，结果是把图像绘制到指定位置。比如：
let image = document.images[0];
context.drawImage(image, 10, 10);
以上代码获取了文本中的第一个图像，然后在画布上的坐标(10, 10)处将它绘制了出来。绘制出来的
图像与原来的图像一样大。如果想改变所绘制图像的大小，可以再传入另外两个参数：目标宽度和目标
高度。这里的缩放只影响绘制的图像，不影响上下文的变换矩阵。比如下面的例子：
context.drawImage(image, 50, 10, 20, 30);
执行之后，图像会缩放到20 像素宽、30 像素高。
还可以只把图像绘制到上下文中的一个区域。此时，需要给drawImage()提供9 个参数：要绘制
的图像、源图像x 坐标、源图像y 坐标、源图像宽度、源图像高度、目标区域x 坐标、目标区域y 坐标、
目标区域宽度和目标区域高度。这个重载后的drawImage()方法可以实现最大限度的控制，比如：
context.drawImage(image, 0, 10, 50, 50, 0, 100, 40, 60);
最终，原始图像中只有一部分会绘制到画布上。这一部分从(0, 10)开始，50 像素宽、50 像素高。而
绘制到画布上时，会从(0, 100)开始，变成40 像素宽、60 像素高。
第一个参数除了可以是HTML 的元素，还可以是另一个元素，这样就会把另一个
画布的内容绘制到当前