这里首先演示下位移，这里使用的函数是translate(x, y)这个函数是叠加的，也就是说，当translate(100, 100)，后再次调用translate(200, 200)，那么最后圆点的基准值就为translate(300, 300)。
也就是说如果要实现某个图形的位移后，还要变回来。
代码如下：
translate(100, 100);
//TODO ... ...
translate(-100, -100);或者使用如下的方式：
save(); //保存当前图形状态
Restore(); //返回save前的状态程序运行截图如下：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">
当前浏览器不支持canvas
</canvas>
<script>
window.onload = function(){
let canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 800;
let context = canvas.getContext("2d");
context.fillStyle = "red";
context.fillRect(0, 0, 400, 400);
context.fillStyle = "blue";
context.translate(100, 100);
context.fillRect(0, 0, 400, 400);
context.fillStyle = "green";
context.translate(300, 300);
context.fillRect(0, 0, 400, 400);
}
</script>
</body>
</html>使用save()及restore()
程序运行截图如下：
源码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">
当前浏览器不支持canvas
</canvas>
<script>
window.onload = function(){
let canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 800;
let context = canvas.getContext("2d");
context.fillStyle = "red";
context.fillRect(0, 0, 400, 400);
context.save();
context.fillStyle = "blue";
context.translate(100, 100);
context.fillRect(0, 0, 400, 400);
context.restore();
context.save();
context.fillStyle = "green";
context.translate(300, 300);
context.fillRect(0, 0, 400, 400);
context.restore();
}
</script>
</body>
</html>下面是关于scale，这里scale会把坐标，线条边框都扩大了，如下图：
源码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">
当前浏览器不支持canvas
</canvas>
<script>
window.onload = function(){
let canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 800;
let context = canvas.getContext("2d");
context.save();
context.scale(1, 1);
context.strokeRect(50, 50, 200, 200);
context.restore();
context.save();
context.scale(2, 2);
context.strokeRect(50, 50, 200, 200);
context.restore();
context.save();
context.scale(3, 3);
context.strokeRect(50, 50, 200, 200);
context.restore();
}
</script>
</body>
</html>下面是关于变换矩阵transform。
这里有个基本概念：二维图像变换矩阵为3*3，三维图像变换矩阵为 4*4
关于二维图像变换矩阵为：
[
a c e
b d f
0 0 1
]
a表示水平缩放，默认值为1；
b表示水平倾斜，默认值为0；
c表示垂直倾斜，默认值为0；
d表示垂直缩放，默认值为1；
e表示水平位移，默认值为0；
f表示垂直位移，默认值为0。
从中可知，默认情况下变换矩阵为单位矩阵
[
1 0 0
0 1 0
0 0 1
]
如下使用单位矩阵变换的例子：
源码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">
当前浏览器不支持canvas
</canvas>
<script>
window.onload = function(){
let canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 800;
let context = canvas.getContext("2d");
context.fillStyle = "red";
context.strokeStyle = "#058";
context.lineWidth = 5;
context.save();
context.transform(1, 0, 0, 1, 0, 0);
context.fillRect(50, 50, 300, 300);
context.strokeRect(50, 50, 300, 300);
context.restore();
}
</script>
</body>
</html>下面开始进行变换，程序运行截图如下：
源码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">
当前浏览器不支持canvas
</canvas>
<script>
window.onload = function(){
let canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 800;
let context = canvas.getContext("2d");
context.fillStyle = "red";
context.strokeStyle = "#058";
context.lineWidth = 5;
context.save();
context.transform(1, 1, 0, 1, 0, 0);
context.fillRect(50, 50, 300, 300);
context.strokeRect(50, 50, 300, 300);
context.restore();
}
</script>
</body>
</html>同样这给transform也是叠加的，使用setTransform是把之前的变换都设置为单位矩阵，然后再进行缩放。