《HTML5 Canvas游戏开发实战》——3.1　变形-阿里云开发者社区

3.1　变形

默认情况下，一个画布的坐标空间会使用画布的左上角 (0,0) 作为原点，x 值向右增加，y 值向下增加。这个坐标空间中的单位通常会被转换为像素，然后，可通过转换坐标空间在绘图过程中实现移动、缩放或旋转等操作。这些操作是通过 translate()、scale() 和 rotate()等方法来实现的，它们会对画布的变换矩阵产生影响。
3.1.1　放大与缩小
我们用scale函数来实现图形的放大和缩小。
其函数原型如下：

scale(x, y);

其中，第一个参数x表示在x轴进行缩放，即水平缩放，第二个参数 y表示在y轴上进行缩放，即在竖直方向上进行缩放。
具体实现方法如代码清单3-1所示。
代码清单　3-1

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.strokeStyle = "#000000";
ctx.strokeRect(10,10,150,100);

ctx.scale(3,3);
ctx.beginPath();
ctx.strokeStyle = "#cccccc";
ctx.strokeRect(10,10,150,100);
</script>

运行后的效果如图3-1所示。
下面解释一下代码清单3-1的代码。首先，以页面上的坐标(10,10)为起点开始画了一个宽150、高100的黑色矩形，如下所示：

ctx.beginPath();
ctx.strokeStyle = "#000000";
ctx.strokeRect(10,10,150,100);

然后，沿着x轴和y轴方向将其值放大3倍，并用同样的代码重新画一个灰色的矩形，如下所示：

ctx.scale(3,3);
ctx.beginPath();
ctx.strokeStyle = "#cccccc";
ctx.strokeRect(10,10,150,100);

从运行效果图可以看到，虽然用了同样的代码，但是第二次画的灰色矩形被放大了3倍，并且起始坐标值也一起被放大了3倍。
上述代码清单3-1实现了放大功能，那么现在来看看缩小功能如何实现，如代码清单3-2所示。
代码清单　3-2

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.strokeStyle = "#000000";
ctx.strokeRect(50,50,150,100);

ctx.scale(0.5,0.5);
ctx.beginPath();
ctx.strokeStyle = "#cccccc";
ctx.strokeRect(50,50,150,100);
</script>

运行后的效果如图3-2所示。

在代码清单3-2中，同样先画出了一个黑色矩形，然后沿着x轴和y轴方向上分别将其值缩小到了0.5倍，并用同样的代码重新画了一个灰色的矩形。
从运行效果图可以看到，虽然用了同样的代码，但是第二次画的灰色矩形被缩小为原来的0.5倍了，并且起始坐标值也一起缩小了0.5倍。
另外还需要了解的是，使用scale函数时，如果将参数设置为负数，还可以使图形翻转，比如代码清单3-3就实现了竖直方向的翻转。
代码清单　3-3

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8" />
</head>
<body>
<canvas id="myCanvas" width="500" height="350" style="background-color: #cccccc;">
你的浏览器不支持HTML5
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

var image = new Image();    
image.src = "face.jpg";  
image.onload = function(){    
    ctx.drawImage(image,10,10);  
    ctx.scale(1,-1);
    ctx.drawImage(image,250,-250);
};  
</script>
</body>
</html>

运行效果如图3-3所示。

3.1.2　平移
使用translate函数可以实现对图形进行平移的功能。
其函数原型如下：

translate (x, y);

其中，第一个参数x表示在x轴进行平移，即在水平方向上平移，第二个参数 y表示在y轴上进行缩放，即在竖直方向上平移。
具体的实现方法如代码清单3-4所示。
代码清单　3-4

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.strokeStyle = "#000000";
ctx.strokeRect(10,10,150,100);

ctx.translate(50,100);
ctx.beginPath();
ctx.strokeStyle = "#cccccc";
ctx.strokeRect(10,10,150,100);
</script>

运行效果如图3-4所示。

在代码清单3-4中的如下代码表示在水平方向上向右平移50，在竖直方向上向下平移100，图3-4中灰色矩形是平移之后的效果。

ctx.translate(50,100);

3.1.3　旋转
利用rotate函数可以实现图形的旋转功能。
其函数原型如下：

rotate (angle);

这里需要注意的是，传入rotate里的参数angle是弧度而不是角度。如果角度为angle，那么换算为弧度就是angle*Math.PI/180，具体实现方法如代码清单3-5所示。
代码清单　3-5

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.strokeStyle = "#000000";
ctx.strokeRect(200,50,100,50);

ctx.rotate(45*Math.PI/180);
ctx.beginPath();
ctx.strokeStyle = "#ff0000";
ctx.strokeRect(200,50,100,50);
</script>

运行效果如图3-5所示。
在图3-5中灰色矩形是旋转45度后的图形，可以看到用rotate来实现旋转时，是以Canvas的起始坐标(0,0)为中心进行旋转的。如果要想让图形以自己为中心旋转，则需要使用3.1.2节中的translate函数，如代码清单3-6所示。

代码清单　3-6

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.strokeStyle = "#000000";
ctx.strokeRect(200,50,100,50);

ctx.translate(250,75);
ctx.rotate(45*Math.PI/180);
ctx.translate(-250, -75);
ctx.beginPath();
ctx.strokeStyle = "#ff0000";
ctx.strokeRect(200,50,100,50);
</script>

运行效果如图3-6所示。

在代码清单3-6中，下面的代码表示先将Canvas的起始坐标向右移250，向下移75，即移至所画矩形的中心处；然后开始旋转45度；接着再将Canvas的起始坐标向左移250，向上移75，即移回到原来位置，这样就完成了图形以自己为中心的旋转。

ctx.translate(250,75);
ctx.rotate(45*Math.PI/180);
ctx.translate(-250, -75);

3.1.4　利用transform矩阵实现多样化的变形
上面分别讲了缩放、平移以及旋转的实现方法。其实所有这些变形都是可以通过变形矩阵transform来实现的。先来看看transform函数的定义。
transform函数的原型如下：

transform (a,b,c,d,e,f);

该函数的各个变量对应以下变换矩阵中相应位置的参数。
a　c　e
b　d　f
0　0　1
下面来说明如何使用这个变换矩阵来实现上面的各种变形。
1 . 缩放
假设原始坐标为(x,y)，缩放后的坐标为(x1,y1)，缩放的倍数分别为a和d，那么就有下列公式：

x1=a*x
y1=d*y

因此，我们得到了如下矩阵公式。

x1         a 　0　0　　x
y1     =      0　d　0　　y
1         0　0　1　　1

这样就可以用transform (a,0,0,d,0,0)来替换scale(a,d)了，如代码清单3-7所示。
代码清单　3-7

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.strokeStyle = "#000000";
ctx.strokeRect(10,10,150,100);

ctx.transform(3,0,0,3,0,0); 
ctx.beginPath();
ctx.strokeStyle = "#cccccc";
ctx.strokeRect(10,10,150,100);
</script>

运行效果如图3-7所示。

可以看到，这里用代码清单3-7实现了和代码清单3-1一样的功能。

平移
同样，假设原始坐标为(x,y)，平移后的坐标为(x1,y1)，在x轴和y轴的平移量分别为e和f，那么就有下列公式：

x1=x+e
y1=y+f

因此，我们得到如下矩阵公式。

x1         1　0　e　　x    
    y1     =      0　1　f　　y    
    1         0　0　1　　1

这样就可以用transform (1,0,0,1,e,f)来替换translate (e,f)了，如代码清单3-8所示。
代码清单　3-8

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.strokeStyle = "#000000";
ctx.strokeRect(10,10,150,100);

ctx.transform (1,0,0,1,50,100);
ctx.beginPath();
ctx.strokeStyle = "#cccccc";
ctx.strokeRect(10,10,150,100);
</script>

运行效果如图3-8所示。

可以看到，这里用代码清单3-8实现了和代码清单3-4一样的功能。
3 . 旋转
旋转对应的矩阵公式如下。

x1         cos     –sin      0        x
y1     =      sin     cos     0        y
1         0    0    1        1

现在可以用transform (cos , sin , –sin , cos ,0,0)来替换rotate ()了，如代码清单3-9所示。
代码清单　3-9

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.strokeStyle = "#000000";
ctx.strokeRect(200,50,100,50);

ctx.transform (Math.cos(45*Math.PI/180),
    Math.sin(45*Math.PI/180),
    -Math.sin(45*Math.PI/180), 
    Math.cos(45*Math.PI/180),0,0);
ctx.beginPath();
ctx.strokeStyle = "#cccccc";
ctx.strokeRect(200,50,100,50);
</script>
</body>

运行效果如图3-9所示。
可以看到，这里用代码清单3-9实现了和代码清单3-5一样的功能。
这样，我们就用transform完成了所有变形。另外，变换矩阵也可以通过setTransform函数来实现，setTransform的参数与transform一样，不同的是，setTransform函数是先消去之前的transform变换，然后重新进行变换的。为了区分transform和setTransform，我们看看下面的例子，如代码清单3-10所示。

代码清单　3-10

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.strokeStyle = "#000000";
ctx.strokeRect(200,50,100,50);

ctx.transform (Math.cos(5*Math.PI/180),
    Math.sin(5*Math.PI/180),
    -Math.sin(5*Math.PI/180), 
    Math.cos(5*Math.PI/180),0,0);
ctx.beginPath();
ctx.strokeStyle = "#cccccc";
ctx.strokeRect(200,50,100,50);

ctx.transform (Math.cos(10*Math.PI/180),
    Math.sin(10*Math.PI/180),
    -Math.sin(10*Math.PI/180), 
    Math.cos(10*Math.PI/180),0,0);
ctx.beginPath();
ctx.strokeStyle = "#999999";
ctx.strokeRect(200,50,100,50);
</script>

运行效果如图3-10所示。

在代码清单3-10中，首先旋转5度，然后再旋转10度，所以第二次旋转相当于旋转了15度。
下面再看看代码清单3-11中setTransform的使用方法。
代码清单　3-11

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.strokeStyle = "#000000";
ctx.strokeRect(200,50,100,50);

ctx.transform (Math.cos(5*Math.PI/180),
    Math.sin(5*Math.PI/180),
    -Math.sin(5*Math.PI/180), 
    Math.cos(5*Math.PI/180),0,0);
ctx.beginPath();
ctx.strokeStyle = "#cccccc";
ctx.strokeRect(200,50,100,50);

ctx.setTransform (Math.cos(10*Math.PI/180),
    Math.sin(10*Math.PI/180),
    -Math.sin(10*Math.PI/180), 
    Math.cos(10*Math.PI/180),0,0);
ctx.beginPath();
ctx.strokeStyle = "#999999";
ctx.strokeRect(200,50,100,50);
</script>

运行效果如图3-11所示。
可以看到，第二次的旋转没有在第一次旋转的基础上进行，因为用setTransform实现旋转效果的时候，已经清除了上一个transform，所以只旋转了10度。
4 . 倾斜
接着来看一下如何实现图像的倾斜效果。首先看图3-12。

图中的3个点p0、p1、p2遵循以下矩形公式。

(p1.x–p0.x)/width    (p2.x–p0.x)/height    p0.x        
(p1.y–p0.y)/width    (p2.y–p0.y)/height    p0.y        
0    0    1

将上面的矩形公式带入setTransform函数中，如代码清单3-12所示。
代码清单　3-12

<script type="text/javascript">
var c=document.getElementById('myCanvas');  
var ctx=c.getContext('2d');
ctx.setTransform(1,10/150,-40/100,1,40,10);  
ctx.rect(50,50,150,100);  
ctx.stroke();
</script>

运行效果如图3-13所示。
上述倾斜效果也可以根据另外3个点来实现，看图3-14。

图中的3个点p1、p2、p3遵循以下矩形公式。

(p3.x–p2.x)/width    (p3.x–p1.x)/height    p2.x        
(p3.y–p2.y)/width    (p3.y–p1.y)/height    p2.y        
0    0    1

将上面的矩形公式代入setTransform函数中，如代码清单3-13所示。
代码清单　3-13

<script type="text/javascript">
var c=document.getElementById('myCanvas');  
var ctx=c.getContext('2d');
ctx.setTransform(130/150,-20/150,-20/100,80/100,0,0);
ctx.rect(50,50,150,100);  
ctx.stroke();
</script>

运行效果如图3-15所示。

5 . 图片的扭曲效果
根据以上所介绍的内容，已经可以做到倾斜、旋转、平移和缩放4种基本变形，如图3-16所示。

但是，对于非上述4种基本变形的特殊变形，就无法直接实现了。比如图3-17中的扭曲变形效果。
这时候，就需要通过多种变形组合来实现。先对图3-17进行分解，如图3-18所示。
此时分解出的两个图形可分别看作是两个基本变形的一部分，如图3-19所示。

这样一来就简单了，只需要实现两个倾斜的变形，然后利用clip函数将图片的一部分绘制出来，就可以完成图3-17中的效果了，如代码清单3-14所示。
代码清单　3-14

<script type="text/javascript">
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
var img = new Image();
img.src="face.jpg";
img.onload = function(){
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(80,0);
    ctx.lineTo(320,40);
    ctx.lineTo(0,200);
    ctx.closePath();
    ctx.clip();
    ctx.setTransform((320-80)/240,40/240,-80/240,200/240,80,0);
    ctx.drawImage(img,0,0);
    ctx.restore();
    
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(320,40);
    ctx.lineTo(0,200);
    ctx.lineTo(200,150);
    ctx.closePath();
    ctx.clip();
    ctx.setTransform(200/240,(150-200)/240,(200-320)/240,(150-40)/240,0,200);
    ctx.drawImage(img,0,0-240);
    ctx.restore();
};
</script>

运行上面的代码，就可以得到图3-17的效果了。
解释一下代码清单3-14。首先看一下左半边图形的绘制。

ctx.beginPath();
ctx.moveTo(80,0);
ctx.lineTo(320,40);
ctx.lineTo(0,200);
ctx.closePath();
ctx.clip();

上面这段代码是以(80,0)、(320,40)和(0,200) 3个点为顶点绘制一个三角形，然后利用clip函数将这个三角形作为绘图的可视区域。

ctx.setTransform(200/240,(150-200)/240,(200-320)/240,(150-40)/240,0,200);

上面的代码是以刚才的三角形的3个顶点来进行倾斜变形的，这个变形的原理已经在代码清单3-12中讲过了。

ctx.drawImage(img,0,0);

上面的代码是绘制图片，因为绘图的可视区域只是一个三角形，所以绘制完的图片只有一部分。
右半边图形的绘制思路和左半边是一样的。同时，两次绘图都加上了save()函数和restore()函数，这是为了让两次变形和绘图互不干涉。

《HTML5 Canvas游戏开发实战》——3.1　变形

3.1　变形

华章出版社

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

《HTML5 Canvas游戏开发实战》——3.1 变形

3.1 变形

华章出版社

热门文章

最新文章

相关课程

相关电子书

相关实验场景

《HTML5 Canvas游戏开发实战》——3.1　变形

3.1　变形