Canvas教程(16)(2)_H5之家 - 中国HTML5教程资源分享第一站

transform()方法的行为相对于由 rotate(),scale(), translate(), or transform() 完成的其他变换。例如：如果我们已经将绘图设置为放到两倍，则 transform() 方法会把绘图放大两倍，那么我们的绘图最终将放大四倍。这一点和之前的变换是一样的。

但是setTransform()不会相对于其他变换来发生行为。它的参数也是六个，context.setTransform(a,b,c,d,e,f)，与transform()一样。

这里我们通过一个例子来说明：
绘制一个矩形，通过 setTransform() 重置并创建新的变换矩阵，再次绘制矩形，重置并创建新的变换矩阵，然后再次绘制矩形。

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>矩阵变换</title> <style> body { background: url("./images/bg3.jpg") repeat; } #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; } </style> </head> <body> <div> <canvas> 你的浏览器居然不支持Canvas？！赶快换一个吧！！ </canvas> </div> <script> window.onload = function(){ var canvas = document.getElementById("canvas"); canvas.width = 800; canvas.height = 600; var context = canvas.getContext("2d"); context.fillStyle = "#FFF"; context.fillRect(0,0,800,600); context.fillStyle="yellow"; context.fillRect(200,100,250,100) context.setTransform(1,0.5,-0.5,1,30,10); context.fillStyle="red"; context.fillRect(200,100,250,100); context.setTransform(1,0.5,-0.5,1,30,10); context.fillStyle="blue"; context.fillRect(200,100,250,100); }; </script> </body> </html>

演示 16-2

运行结果：

setTransform

解释一下过程：每当我们调用 setTransform() 时，它都会重置前一个变换矩阵然后构建新的矩阵，因此在下面的例子中，不会显示红色矩形，因为它在蓝色矩形下面。

这一节的内容有些难和多，但是除了倾斜其他并不实用，所以童鞋们尽量了解一下就好，能够掌握就更好啦！至此，所有的图形变换我们已经上完了，基本的三大变化——平移变换、旋转变换、缩放变换，以及万能的矩阵变换。大家都以及完全掌握了吗？如果不熟练，要回头多看看，并且多加练习。稍作休息，下一节开始，就是新的航程！我们继续前进！

如果您喜欢本书，请使用支付宝扫描下面的二维码捐助作者。