HTML实现坐标转换成图,HTML5 Canvas的图形变换

很多时候，我们绘制出一个图形之后，并不能达到我们预期的效果，这个时候，适当地运用图形的变换(transformations，如旋转和缩放等)，可以创建出大量复杂多变的图形。

1、保存和恢复Canvas状态

Canvas指的是当前画面的所有样式、变形和裁切的一个快照，以堆的方式保存。save和restore方法用于保存和恢复Canvas状态，这两个方法都不需要任何参数，用法如下：

context.save()；

context.restore()；

sava方法可以暂时将当前状态保存在堆中，这些状态可以是各种属性(如strokeStyle、fillStyle和globalCompositeOperation等)的值。当前应用的变形、当前裁切的路径等。restore方法用于将上一个保存状态从堆中再次取出，恢复该状态的所有设置。

举一个简单的示例：

先来看看最后的效果图：

我们保存的Canvas状态属性值是fillStyle填充为红色，strokeStyle轮廓为蓝色，当我们没有调用restore方法恢复时，依旧使用的是我们自己定义的属性值。但是，我们可以看到当我们调用restore后，绘制出来的矩形填充以及轮廓就是我们之前保存的值。

2、移动坐标空间

在上一篇Canvas元素中我们提到过，画布的坐标空间默认的是以画布左上角(0，0)为原点，x轴水平向右为正向，y轴垂直向下为正向。而在绘制图形时，我们可以使用translate方法移动坐标空间，使画布的变换矩阵发生水平和垂直方向的偏移，其用法如下：

context.translate(dx，dy)；

其中dx和dy分别为坐标原点沿水平和垂直两个方向的偏移量。如下图所示：

当然了，在进行图形变换之前，最好先要养成使用save方法保存当前状态的好习惯。在许多情况下，使用restore方法来自动恢复原来的状态要比手动恢复更高效，特别是当重复某种运算时。接下来，我们就通过绘制一个伞状图形的示例加深对它的理解。

最后的效果图：

在这里，我只想说的一点是，关于

ctx.fillRect(-1.5,0,1.5,40);和ctx.arc(-5,40,4,Math.PI,Math.PI*2,true);

这两个语句的坐标问题，主要是取决于你后面绘制的图形的宽度。

Canvas中图形移动的实现，实际上是通过改变画布的坐标原点实现的，所谓的“移动图形”，只是看上去被移动的样子，移动的是其实是坐标空间。

3、旋转坐标空间

rotate方法用于以原点为中心旋转Canvas，实质上旋转的是Canvas上下文对象的坐标空间，具体用法是：

context.rotate(angle)；

rotate方法只有一个参数，即旋转角度angle，其顺时针方向为正方向，以弧度为单位，旋转中心是Canvas的原点。

拿上一个伞状例子来说，我现在的状态是一行排列的，那么我现在想要将它旋转成一个圆形队列，又该怎么实现呢？

function draw(){

var ctx = document.getElementById("myCanvas").getContext("2d");

// 垂直方向和水平方向发生了偏移

ctx.translate(150,150);

for(var i=1;i<9;i++){

ctx.save();

// 图片旋转角度

ctx.rotate(Math.PI*(2/4+i/4));

// 水平方向发生偏移

ctx.translate(0,-100);

// 绘制伞状图形的上半部分，也就是半圆部分，第二个参数表示填充颜色

drawTop(ctx,"rgb("+(30*i)+","+(255-30*i)+",255)");

// 绘制伞状图形的下半部分

drawGrip(ctx);

ctx.restore();

}

}

其实，到最后，我们会发现，只是draw方法发生了变化。具体是什么变化呢？无非就是多了ctx.rotate(Math.PI*(2/4+i/4));和ctx.translate(0,-100);语句。那么接下来，我们一起思考为什么要使用这两个方法里的数据。

首先，我们首先明确Math.PI是180度，那么很显然旋转一圈是360度，也就是说，后面的参数(2/4+i/4)中，i=1时表示初始旋转的位置，后面的则依次递加。

其次，为什么每次都要将坐标空间沿y轴负方向移动100px呢？那是因为，如果我们不移动，最后所有的图形都会重合成一个圆，就像下面这样：

而我们实际想要的效果是什么呢？

4、缩放图形

scale方法用于增减Canvas上下文对象中的像素数目，从而实现图形或位图的放大或缩小，其用法是：

context.scale(x，y)；

其中x，y为必须接受的参数，x为横轴的缩放因子，y轴为纵轴的缩放因子，它们的值必须是正值。

若放大图形，参数值需大于1；

若缩小图形，参数值需小于1；

若参数值等于1，无任何效果。

我们可以用一个螺旋状由大到小的例子来深入理解缩放的使用：

其实，这也不难理解，我们反反复复使用的都是提到过的方法，唯一的不同是，我们现在把所有的方法整合在了一起，我们传递的参数不再是一个确定的值，所以，我们实现的效果也是千变万化的。

关于Canvas元素其实还有其他的很多方法，后续将会继续补充，希望大家能够共同进步！