8．变形.docVIP

8．变形 到现在为止，你在画布中绘制的所有元素都是按照它应该出现的样子绘制的。例如，矩形是按照fillRect方法定义的位置和尺寸绘制的，并且它是用水平和垂直的线条绘制的，平淡无奇。但是，如果你想要画一些奇特的图形呢？如果想要旋转一个矩形呢？如果想要缩放图形呢？2D渲染上下文的变形功能能够帮助你实现所有这样的操作。它们支持的功能是非常强大的。 平移 最基本的操作就是平移，即将2D渲染上下文的原点从一个位置移动到另一个位置。在画布中进行平移使用的是translate方法时，实际上它移动的是2D渲染上下文的坐标原点，而不是所绘制的对象（参见图1）。 图1 translate方法移动2D渲染上下文的原点 Translate方法的调用方式如下： context.translate(150, 150); 两个参数是（x，y）坐标值，表示把2D渲染上下文的原点移动多远．一定要注意，将来你所指定（x，y）坐标值会加上原点的平移，原点最初的默认值是(0，0)。例如，如果执行两次与上面例子完全相同的平移，那么实际上是将原点在x轴方向移动300个单位(0+150+150)，在y轴方向也移动300个单位(0+150+150)。 通过移动2D渲染上下文的原点，画布中的所有对象都将移动相应的距离： context.fillRect(150, 150, 100, 100); context.translate(150, 150); context.fillStyle = rgb(255, 0, 0); context.fillRect(150, 150, 100, 100); 一般情况下，第二次调用fillRect时，所绘制的正方形的原点坐标是(150，150)，但是由于执行了一次平移，这个正方形的原点现在变成(300，300)（参见图2）。 图2 平移会影响图形原点 一定要理解这其中的原理。红色正方形的原点仍然为(150，150)，它只是看上去又平移了150像素，这是因为在黑色正方形绘制之后，2D渲染上下文的原点已经平移了150像素。如果你希望红色正方形仍然出现在点(150，150)原来的位置（即黑色正方形所在位置），那么可以直接将它的原点设为(0,0)： context.translate(150, 150); context.fillStyle = rgb(255, 0, 0); context.fillRect(0, 0, 100, 100); 这是因为你已经将2D渲染上下文移动到位置(150，150)，所以从现在开始，所有在点(0,0)绘制的图形实际上都显示在点(150，150)上。 注意：每一种变形方法，包括平移，都会影响方法执行后所绘制的所有元素。这是因为它们都是直接在2D渲染上下文上操作的，而不是只针对所绘制的图形，这与你修改了fillStyle等属性的效果一样，新的颜色会影响后来绘制的所有元素。 缩放 另一个变形方法就是缩放(scale)，顾名思义，它是调整2D渲染上下文的尺寸。它与平移的区别在于（x，y）参数是缩放倍数，而不是像素值。 context.scale(2, 2); context.fillRect(150, 150, 100, 100); 这个例子将2D渲染上下文的x和y方向都乘以2。通俗地说，2D渲染上下文及其绘制的所有对象现在都变成2倍尺寸（参见图3）。 图3 缩放2D渲染上下文 单独使用scale将使所有绘图内容变大，而且它也会使一些对象被画在一些不恰当的位置上。例如，放大2倍实际上意味着现在1个像素变成2个像素．所以如果你绘制了一个x为150像素的图形，现在它看起来像是变成x为300像素了。如果这不符合你的要求，或者你只想要缩放一个图形，可以组合使用scale和translate方法。 context.save(); context.translate(150, 150); context.scale(2, 2); context.fillRect(0, 0, 100, 100); 在这个例子中，首先保存画布的状态，再将原点平移到(150，150)。然后，将画布放大两倍，在位置(0，0)绘制一个正方形。因为已经将2D渲染上下文平移到(150，150)，所以这个正方形会被绘制在正确的位置，并同时放大两倍（参见图4）。 图4 保持原点同时进行缩放 问题是，从现在开始绘制的其他图形都将平移150像素并在两个方向同时放大两倍。幸好，你已经完成了前面一半的工作：在执行变形之前保存了绘图状态。剩下一半工作是恢复之前保存的绘图状态。 context.restore(); context.fillRect(0, 0, 100, 100); 在恢复绘图状态之后，后面绘制的所有图形都不会出现变形效果(参