然后fillStyle属性有被设置成了蓝色并绘制了一个矩形。因为坐标移动了，实际上最终矩形是画在（100,100）。当调用了restore()之后，fillStyle()有设回了绿色，所以接下来画的矩形是绿色的。矩形实际是画在（110，110）处，因为坐标转换仍然有效。当再次调用了restore()之后，取消了坐标转换并且fillStyle设回了红色。最后的矩形是画在（0，0）处的。

注意save()只保存应用于绘图环境上的设置的变换，不包括绘图环境的内容。

5.canvas使用图片

2D绘图环境对图片操作有一些内置的支持。如果以一个现成的图片要画在画布上，可以调用drawImage()方法。根据所需结果，可以用三套参数调用这个方法。最简单的是传入一个HTML<img>元素，以及目标x坐标和y坐标，可以在指定位置绘制图像。如下：

var images = document.getElementsByTagName("image"); var image = document.images[0]; context.drawImage(image, 10 ,10);

这段代码取得了文档中的第一个图像，并显示在环境中的位置（10，10）处，还可以通过增加两个参数改变绘制图像的方式：目标宽和高。它能缩放图像而不会影响变换矩阵。例如：

context.drawImge(image, 50, 10, 20, 30);

当执行这段代码时，图像缩放成了20像素和30像素高。

还可以值选择图像的一部分显示在环境中。这要给drawImage()提供九个参数：要绘制的图像、源图像的x坐标、源图像的y坐标、源图像的宽、源图像的高、目标图像的x坐标、目标图像的y坐标、目标图像的宽、目标图像的高。使用drawImage()这个重载可以获得最多的控制权。看这个例子：

context.drawImage(image, 0, 10, 50, 50, 0, 100, 40, 60);

这里，图像只有一部分被显示在了画布上。这部分图像起始于（10，10），50像素宽50像素高。图像在环境（10，10）处缩放为40×60显示。