HTML 5深入淺出教學篇之十
作者：webabcd
本文講要的講的是HTML 5畫布（canvas）之轉換：平移|translate()；旋轉|rotate()；縮放|scale()；矩陣轉換|transform(a, b, c, d, e, f)
介紹
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>
#p#
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>
原文鏈接：http://www.cnblogs.com/webabcd/archive/2012/02/22/2362505.html
責任編輯：張偉
來源：
webabcd的博客
