HTML Canvas - 变换

我们已经学习了如何使用坐标在画布网格上绘制形状。我们可以使用变换来将原点的位置转换到不同的位置，旋转和缩放网格。

保存和恢复是两种必不可少的的方法，可以帮助我们绘制复杂的图形。每种方法的描述如下。

序号	方法和描述
1	save() 此方法用于保存画布元素的当前状态。它保存画布的整个状态。
2	restore() 此方法回滚最后保存的画布状态。

序号

方法和描述

save()

此方法用于保存画布元素的当前状态。它保存画布的整个状态。

restore()

此方法回滚最后保存的画布状态。

Canvas 使用堆栈来存储对画布元素所做的所有修改。save() 方法可以根据用户的需要调用多次，并被压入堆栈。每次调用 restore() 方法时，最后一个保存的状态都会从堆栈中弹出，并恢复到画布中。

示例

以下示例说明了如何在画布元素中实现 save() 和 restore()。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Transforming </title>
   </head>
   <body onload="transform();">
      <canvas id="canvas" width="300" height="250" style="border: 1px solid black;"></canvas>
      <script>
         function transform() {
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            context.fillStyle = 'orange';
            context.fillRect(40, 40, 200, 150);
            context.save();
            context.fillStyle = 'white';
            context.fillRect(55, 55, 170, 120);
            context.save();
            context.fillStyle = 'green';
            context.fillRect(70, 70, 140, 90);
            context.restore();
            context.fillRect(85, 85, 110, 60);
            context.restore();
            context.fillRect(100, 100, 80, 30);
         }
      </script>
   </body>
</html>

输出

以下代码的输出是

平移

translate() 方法可以用来移动画布网格的原点并在其中绘制图形。该方法如下所示

translate(x, y) - 此方法将画布原点和网格移动到另一个位置。“x”表示要移动的水平距离，“y”表示要移动的垂直距离。

示例

以下示例演示了 translate() 方法的功能。实现代码如下所示。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Transforming </title>
   </head>
   <body onload="translate();">
      <canvas id="canvas" width="500" height="400" style="border: 1px solid black;"></canvas>
      <script>
         function translate() {
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            context.fillStyle = 'green';
            context.fillRect(25, 25, 150, 100);
            context.translate(100, 100);
            context.fillStyle = 'blue';
            context.fillRect(125, 125, 150, 100);
         }
      </script>
   </body>
</html>

输出

上述代码返回的输出是

旋转

rotate() 方法可用于使用原点坐标作为参考点将画布元素旋转到某个角度。该方法如下所示

rotate(angle) - 画布元素以作为参数传递给 rotate() 方法的角度旋转。要更改原点位置，可以使用 translate() 方法。角度应以弧度表示。

示例

以下示例演示了 rotate() 方法，并展示了角度变化如何影响绘制的形状。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Transforming </title>
   </head>
   <body onload="rotate();">
      <canvas id="canvas" width="350" height="250" style="border: 1px solid black;"></canvas>
      <script>
         function rotate() {
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            context.fillStyle = 'green';
            context.fillRect(25, 25, 150, 100);
            context.translate(100, 100);
            context.rotate(75);
            context.fillStyle = 'blue';
            context.fillRect(25, 25, 150, 100);
         }
      </script>
   </body>
</html>

输出

上述图像生成的形状是

缩放和变换

变换方法缩放和变换主要用于通过改变画布的单位和变换位置来改变画布元素网格。这些方法如下所示。

scale(x, y) - scale 方法用于增加或减小画布网格的大小。默认情况下，画布元素的一个单位正好是一个像素。scale 方法采用所有浮点值，小于 1.0 的值减小单位大小，大于 1.0 的值增加画布的单位大小，用于缩放网格。

缩放示例

以下示例缩放画布网格并使用可用函数绘制文本。实现代码如下所示

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Transforming </title>
   </head>
   <body onload="scale();">
      <canvas id="canvas" width="600" height="200" style="border: 1px solid black;"></canvas>
      <script>
         function scale() {
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            context.scale(1.5, 3.0);
            context.font = '50px Verdana';
            context.fillText('TutorialsPoint', 10, 50);
         }
      </script>
   </body>
</html>

输出

以下代码返回的画布文本为

变换方法可用于直接修改变换矩阵。可用于实现变换的方法如下所示。

transform(a, b, c, d, e, f) - 此方法将当前矩阵与变换矩阵相乘。涉及的参数为：

a - 水平缩放
b - 水平倾斜
c - 垂直倾斜
d - 垂直缩放
e - 水平移动
f - 垂直移动

setTransform(a, b, c, d, e, f) 方法：它将当前变换重置为单位矩阵，并调用 transform() 方法使用参数设置指定的变换。

resetTransform() 方法 - 它将当前矩阵更改为单位矩阵。

变换示例

以下代码在文本上实现了变换方法。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Transforming </title>
   </head>
   <body onload="transform();">
      <canvas id="canvas" width="300" height="350" style="border: 1px solid black;"></canvas>
      <script>
         function transform() {
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            context.font = '40px Verdana';
            context.strokeText('Transform', 50, 50);
            context.transform(0.5, 1.0, 1.5, 1.0, 0.5, 0);
            context.font = '40px Verdana';
            context.strokeText('Transform', 50, 50);
         }
      </script>
   </body>
</html>

输出

上述代码的输出是

打印页面