在html5中，可以实现多种的图形变换包括平移，缩放和旋转。可以通过两种方式，分别是矩阵法和函数法，以下分别介绍平移，缩放和旋转用这两种方法实现。
1.平移：
context.fillRect(50,50,50,50); context.translate(100,100); context.fillRect(50,50,50,50);
如果没有中间这句你看到的效果会是只有一个矩形，因为第一个矩形和第二个矩形重合了，现在的效果是进行了平移，效果如下：
首先，本篇介绍的方法都是状态值，也就是说他的作用域将影响它下面的所有代码，也可以使用save和restore来存储和弹出状态。上面介绍的是调用函数来解决平移的问题，下面介绍矩阵法，我们可以使用context的transform方法来进行矩阵变化操作，它有六个参数，有些解释喜欢把它们解释为负责不同的操作，我更愿意从整体上介绍这六个参数，也就是说分别在平移，缩放和旋转时这些参数负责的是不同的，首先介绍整体，从整体上前四个参数负责缩放和旋转，后两个参数是平移，前四个参数1，4为一组，2，3为一组，1和2是x值，3和4是y值，5和6分别为x,y的平移，上面的代码如果用矩阵就按下面的方法写：
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);
在这里第二句代码和第三句注掉的代码意义一样，之所以要在1，4这组和2，3这组中的一组里写1，是因为我们要保证矩形不被缩放，如果是0的话则大小被缩放为0。
2.缩放
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.scale以后，所有的坐标都会缩放，会使原来的一半，所以就会和下面的效果不同
以下是第一段代码和第二段的对比：
可以看出后一张图发生了错位。
下面介绍矩阵法：
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);
和上面的一样，注掉的代码效果是一样的，同样的，也需要先平移，同样的，第一个参数和第四个参数这组和第二个第三个参数这组是一样的。
3.旋转
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);
两组参数分别为cos旋转角，sin旋转角，负的sin旋转角，cos旋转角，或者为负的sin旋转角，cos旋转角，cos旋转角，sin旋转角。
如有错误，希望大家多多指正
以上就是Html5 Canvas初探学习笔记(6) -变换的内容，更多相关内容请关注PHP中文网（m.sbmmt.com）！
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
