<!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) 该方法是允许直接对变形矩阵作修改。
这个方法必须将当前的变形矩阵乘上下面的矩阵：