柠檬铺

柠檬铺

2015年2月9日

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

介绍
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

双击代码全选
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52	`<!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

双击代码全选
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46	`<!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

双击代码全选
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52	`<!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

发表回复取消回复

Grow your business fast with

Suku