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。
 shadowOffsetY：阴影相对于形状或路径的y 坐标的偏移量，默认为0。
 shadowBlur：像素，表示阴影的模糊量。默认值为0，表示不模糊。
这些属性都可以通过context 对象读写。只要在绘制图形或路径前给这些属性设置好适当的值，
阴影就会自动生成。比如：
let context = drawing.getContext(“2d”);
// 设置阴影
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 4;
context.shadowColor = “rgba(0, 0, 0, 0.5)”;
// 绘制红色矩形
context.fillStyle = “#ff0000”;
context.fillRect(10, 10, 50, 50);
// 绘制蓝色矩形
context.fillStyle = “rgba(0,0,255,1)”;
context.fillRect(30, 30, 50, 50);