千呼万唤 HTML 5 (10) - 画布(canvas)之转换

[索引页]
[源码下载] 


千呼万唤 HTML 5 (10) - 画布(canvas)之转换



作者: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
[源码下载]

posted @ 2012-02-22 09:15  webabcd  阅读(5394)  评论(7编辑  收藏  举报