原文地址：http://www.cnblogs.com/webabcd/archive/2012/02/22/2362505.html
作者：webabcd
介绍
HTML 5: 画布（canvas）之转换（转换画布的用户坐标系）
- 平移 | translate()
- 旋转 | rotate()
- 缩放 | scale()
- 矩阵转换 | transform(a, b, c, d, e, f)
- 矩阵转换 | setTransform(a, b, c, d, e, f)
示例
1、平移 | translate()
canvas/transform/translate.html
<!DOCTYPE HTML>
<html>
<head><title>平移</title>
</head>
<body><canvas id="canvas" width="400" height="400" style="background-color: rgb(222, 222, 222)">您的浏览器不支持 canvas 标签</canvas><br /><button type="button" onclick="drawIt();">不断地点我看 Demo</button><button type="button" onclick="clearIt();">清除画布</button><script type="text/javascript">var ctx = document.getElementById('canvas').getContext('2d');var canvasX = 0;var canvasY = 0;var stepX = 20;var stepY = 20;function drawIt() {if (canvasX == 0 && canvasY == 0)ctx.strokeRect(0, 0, 100, 100);canvasX += stepX;canvasY += stepY;/** context.translate(x, y) - 将当前的用户坐标系平移指定的距离* x - x 轴方向上需要平移的像素数* y - y 轴方向上需要平移的像素数*/ctx.strokeStyle = "blue";ctx.translate(stepX, stepY);ctx.strokeRect(0, 0, 100, 100);}function clearIt() {ctx.translate(-canvasX, -canvasY);canvasX = 0;canvasY = 0;ctx.strokeStyle = "black";ctx.clearRect(0, 0, 400, 400);}</script>
</body>
</html>
2、旋转 | rotate()
canvas/transform/rotate.html
<!DOCTYPE HTML>
<html>
<head><title>旋转</title>
</head>
<body><canvas id="canvas" width="400" height="400" style="background-color: rgb(222, 222, 222)">您的浏览器不支持 canvas 标签</canvas><br /><button type="button" onclick="drawIt();">不断地点我看 Demo</button><button type="button" onclick="clearIt();">清除画布</button><script type="text/javascript">var ctx = document.getElementById('canvas').getContext('2d');var canvasRadian = 0;var stepRadian = 15 * Math.PI / 180;function drawIt() {if (canvasRadian == 0)ctx.strokeRect(360, 0, 20, 60);canvasRadian += stepRadian;/** context.rotate(radian) - 将当前的用户坐标系旋转指定的弧度，顺时针为正值，逆时针为负值* radian - 弧度值*/ctx.strokeStyle = "blue";ctx.rotate(stepRadian);ctx.strokeRect(360, 0, 20, 60);}function clearIt() {ctx.rotate(-canvasRadian);canvasRadian = 0;ctx.strokeStyle = "black";ctx.clearRect(0, 0, 400, 400);}</script>
</body>
</html>
3、缩放 | scale()
canvas/transform/scale.html
<!DOCTYPE HTML>
<html>
<head><title>缩放</title>
</head>
<body><canvas id="canvas" width="400" height="400" style="background-color: rgb(222, 222, 222)">您的浏览器不支持 canvas 标签</canvas><br /><button type="button" onclick="drawIt();">不断地点我看 Demo</button><button type="button" onclick="clearIt();">清除画布</button><script type="text/javascript">var ctx = document.getElementById('canvas').getContext('2d');var canvasScaleX = 1;var canvasScaleY = 1;var stepScaleX = 1.1;var stepScaleY = 1.1;function drawIt() {if (canvasScaleX == 1 && canvasScaleY == 1)ctx.strokeRect(0, 0, 60, 60);canvasScaleX *= stepScaleX;canvasScaleY *= stepScaleY;/** context.scale(x, y) - 将当前的用户坐标系缩放指定的倍数* x - 水平方向上的缩放倍数* y - 垂直方向上的缩放倍数*/ctx.strokeStyle = "blue";ctx.scale(stepScaleX, stepScaleY);ctx.strokeRect(0, 0, 60, 60);}function clearIt() {ctx.scale(1 / canvasScaleX, 1 / canvasScaleY);canvasScaleX = 1;canvasScaleY = 1;ctx.strokeStyle = "black";ctx.clearRect(0, 0, 400, 400);}</script>
</body>
</html>
4、矩阵转换 | transform(a, b, c, d, e, f)
canvas/transform/transform.html
<!DOCTYPE HTML>
<html>
<head><title>矩阵转换 | transform(a, b, c, d, e, f)</title>
</head>
<body><canvas id="canvas" width="400" height="400" style="background-color: rgb(222, 222, 222)">您的浏览器不支持 canvas 标签</canvas><br /><button type="button" onclick="drawIt();">不断地点我看 Demo</button><button type="button" onclick="clearIt();">清除画布</button><script type="text/javascript">var ctx = document.getElementById('canvas').getContext('2d');var canvasScaleX = 1;var canvasScaleY = 1;var stepScaleX = 1.1;var stepScaleY = 1.1;function drawIt() {if (canvasScaleX == 1 && canvasScaleY == 1)ctx.strokeRect(0, 0, 60, 60);canvasScaleX *= stepScaleX;canvasScaleY *= stepScaleY;/** context.transform(a, b, c, d, e, f) - 按指定的矩阵转换当前的用户坐标系* 相当于：context.transform(M11, M12, M21, M22, OffsetX, OffsetY)** 关于仿射矩阵参考：http://www.cnblogs.com/webabcd/archive/2008/11/03/1325150.html** |X| |M11（默认值 1） M21（默认值 0） 0|* |Y| = |x y 1| * |M12（默认值 0） M22（默认值 1） 0|* |1| |OffsetX（默认值 0） OffsetY（默认值 0） 1|** X = x * M11 + y * M12 + OffsetX* Y = x * M21 + y * M22 + OffsetY*/ctx.strokeStyle = "blue";ctx.transform(stepScaleX, 0, 0, stepScaleY, 0, 0);ctx.strokeRect(0, 0, 60, 60);}function clearIt() {ctx.transform(1 / canvasScaleX, 0, 0, 1 / canvasScaleY, 0, 0);canvasScaleX = 1;canvasScaleY = 1;ctx.strokeStyle = "black";ctx.clearRect(0, 0, 400, 400);}</script>
</body>
</html>
5、矩阵转换 | setTransform(a, b, c, d, e, f)
canvas/transform/setTransform.html
<!DOCTYPE HTML>
<html>
<head><title>矩阵转换 | setTransform(a, b, c, d, e, f)</title>
</head>
<body><canvas id="canvas" width="400" height="400" style="background-color: rgb(222, 222, 222)">您的浏览器不支持 canvas 标签</canvas><br /><button type="button" onclick="drawIt();">Demo</button><button type="button" onclick="clearIt();">清除画布</button><script type="text/javascript">var ctx = document.getElementById('canvas').getContext('2d');function drawIt() {ctx.strokeStyle = "red";ctx.scale(2, 2);ctx.strokeRect(0, 0, 60, 60);/** context.setTransform(a, b, c, d, e, f) - 首先重置用户坐标系，然后再按指定的矩阵转换用户坐标系（translate, rotate, scale, transform 是针对当前用户坐标系做转换，而 setTransform 是针对重置后的用户坐标系做转换）* 相当于：context.setTransform(M11, M12, M21, M22, OffsetX, OffsetY)** 关于仿射矩阵参考：http://www.cnblogs.com/webabcd/archive/2008/11/03/1325150.html** |X| |M11（默认值 1） M21（默认值 0） 0|* |Y| = |x y 1| * |M12（默认值 0） M22（默认值 1） 0|* |1| |OffsetX（默认值 0） OffsetY（默认值 0） 1|** X = x * M11 + y * M12 + OffsetX* Y = x * M21 + y * M22 + OffsetY*/ctx.strokeStyle = "blue";ctx.setTransform(1, 0, 0, 1, 0, 0);ctx.strokeRect(0, 0, 60, 60);}function clearIt() {ctx.clearRect(0, 0, 400, 400);}</script>
</body>
</html>
OK
[源码下载]