Canvas transform【每日一段代码28】

<!DOCTYPE html>
<html>
<head>
<title>scale</title>
<script type="text/javascript">
function draw() {
var canvas = document.getElementById("myCanvas");
var cxt = canvas.getContext("2d");
var sin = Math.sin(Math.PI/6);
var cos = Math.cos(Math.PI/6);
cxt.translate(200,200);
var c = 0;
for (i=0; i<=12; i++)
{
c = Math.floor(255/12*i);
cxt.fillStyle="rgb("+c+","+c+","+c+")";
cxt.fillRect(0,0,100,10);
cxt.transform(cos,sin,-sin,cos,0,0);
}
cxt.setTransform(-1,0,0,1,200,200);
cxt.fillStyle="rgba(255,128,255,0.5)";
cxt.fillRect(0,50,100,100);
}
</script>
</head>
<body onLoad="draw()">
<canvas id="myCanvas" height="500" width="500" style="border:2px solid #06c;">
</canvas>
</body>
</html>

【transform(m11, m12, m21, m22, dx, dy) 该方法是允许直接对变形矩阵作修改。

这个方法必须将当前的变形矩阵乘上下面的矩阵：

Code:
m11 m21 dx
m12 m22 dy
0 0 1

如果任意一个参数是无限大，变形矩阵也必须被标记为无限大，否则会抛出异常。

Code:
setTransform(m11, m12, m21, m22, dx, dy)

这个方法必须重置当前的变形矩阵为单位矩阵，然后以相同的参数调用 transform 方法。如果任意一个参数是无限大，那么变形矩阵也必须被标记为无限大，否则会抛出异常。】