canvas笔记-图形变换(位移translate、缩放scale、变换矩阵transform)- 前端开发

这里首先演示下位移，这里使用的函数是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("https://cdn.jxasp.com:9143/image/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("https://cdn.jxasp.com:9143/image/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("https://cdn.jxasp.com:9143/image/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("https://cdn.jxasp.com:9143/image/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("https://cdn.jxasp.com:9143/image/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>