在
html5
中，可以实现多种的图形变换包括平移，缩放和旋转。可以通过两种方式，分别是矩阵法和函数法，以下分别介绍平移，缩放和旋转用这两种方法实现。
1.平移：
如果没有中间这句你看到的效果会是只有一个矩形，因为第一个矩形和第二个矩形重合了，现在的效果是进行了平移，效果如下：
首先，本篇介绍的方法都是状态值，也就是说他的作用域将影响它下面的所有代码，也可以使用
save
和
restore
来存储和弹出状态。上面介绍的是调用函数来解决平移的问题，下面介绍矩阵法，我们可以使用
context
的
transform
方法来进行矩阵变化操作，它有六个参数，有些解释喜欢把它们解释为负责不同的操作，我更愿意从整体上介绍这六个参数，也就是说分别在平移，缩放和旋转时这些参数负责的是不同的，首先介绍整体，从整体上前四个参数负责缩放和旋转，后两个参数是平移，前四个参数
1
，
4
为一组，
2
，
3
为一组，
1
和
2
是
x
值，
3
和
4
是
y
值，
5
和
6
分别为
x,y
的平移，上面的代码如果用矩阵就按下面的方法写：
立即学习
“
前端免费学习笔记（深入）
”；
在这里第二句代码和第三句注掉的代码意义一样，之所以要在
1
，
4
这组和
2
，
3
这组中的一组里写
1
，是因为我们要保证矩形不被缩放，如果是
0
的话则大小被缩放为
0
。
2.缩放
缩放和旋转都要用到平移，这是因为我们如果用如下的代码写会出现问题
这个代码貌似和上面的代码一样，但实际上不一样，因为当你调用
context.scale
以后，所有的坐标都会缩放，会使原来的一半，所以就会和下面的效果不同
以下是第一段代码和第二段的对比：
基于PhoneGap的HTML5的移动应用 中文WORD版
本文档主要讲述的是基于PhoneGap的HTML5的移动应用；希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看
下载
可以看出后一张图发生了错位。
下面介绍矩阵法：
和上面的一样，注掉的代码效果是一样的，同样的，也需要先平移，同样的，第一个参数和第四个参数这组和第二个第三个参数这组是一样的。
3.旋转
如下的代码可以实现旋转，同样的原因，也需要先平移，旋转的角度使用弧度制，效果如下：
下面介绍的是使用矩阵法：
两组参数分别为
cos
旋转角，
sin
旋转角，负的
sin
旋转角，
cos
旋转角，或者为负的
sin
旋转角，
cos
旋转角，
cos
旋转角，
sin
旋转角。
如有错误，希望大家多多指正
以上就是Html5 Canvas初探学习笔记(6) -变换的内容，更多相关内容请关注PHP中文网（www.php.cn）！
context.fillRect(50,50,50,50);
context.translate(100,100);
context.fillRect(50,50,50,50);context.fillRect(50,50,50,50);
context.transform(1,0,0,1,100,100);
//context.transform(0,1,1,0,100,100);
context.fillRect(50,50,50,50); context.fillRect(50,50,50,50);
context.translate(150,50);
context.scale(0.5,0.5);
context.fillRect(0,0,50,50);context.fillRect(50,50,50,50);
context.scale(0.5,0.5);
context.fillRect(150,50,50,50);context.fillRect(50,50,50,50);
context.transform(0,0.5,0.5,0,150,50);
//context.transform(0.5,0,0,0.5,150,50);
context.fillRect(0,0,50,50);context.fillRect(50,50,50,50);
context.translate(150,50);
context.rotate(Math.PI/4);
context.fillRect(0,0,50,50);context.fillRect(50,50,50,50);
context.transform(Math.cos(Math.PI/4),Math.sin(Math.PI/4),-Math.sin(Math.PI/4),Math.cos(Math.PI/4),150,50);
//context.transform(-Math.sin(Math.PI/4),Math.cos(Math.PI/4),Math.cos(Math.PI/4)
//,Math.sin(Math.PI/4),150,50);
context.fillRect(0,0,50,50);