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 的元素，还可以是另一个元素，这样就会把另一个 画布的内容绘制到当前画布上。
结合其他一些方法，drawImage()方法可以方便地实现常见的图像操作。操作的结果可以使用 toDataURL()方法获取。不过有一种情况例外:如果绘制的图像来自其他域而非当前页面，则不能获取 其数据。此时，调用 toDataURL()将抛出错误。比如，如果来自 www.example.com 的页面上绘制的是 来自 www.wrox.com 的图像，则上下文就是“脏的”，获取数据时会抛出错误。

阴影

2D 上下文可以根据以下属性的值自动为已有形状或路径生成阴影。
 shadowColor:CSS 颜色值，表示要绘制的阴影颜色，默认为黑色。
 shadowOffsetX:阴影相对于形状或路径的 x 坐标的偏移量，默认为 0。