Canvas描绘多彩的星空 | HTML5图形开发从最基础开始学Canvas(二)：基本图形变换、状态的保存恢复及代码实现五角星

2023-11-19 10:13:49

从最基础开始学Canvas(二)：基本图形变换、状态的保存恢复及代码实现五角星

在上一篇文章中，我们学习了如何使用Canvas来创建基本图形，如矩形、圆形和线条。在本文中，我们将深入一步，学习如何对这些图形进行变换，包括位移、旋转和缩放。我们还将学习如何保存和恢复状态，以便在需要时轻松地撤销或重做变换。最后，我们将用学到的知识来实现一个用Canvas绘制的五角星。

基本图形变换

基本的图形变换包括位移、旋转和缩放。位移是指将图形从一个位置移动到另一个位置。旋转是指将图形绕着一个点旋转一定角度。缩放是指将图形放大或缩小。

在Canvas中，这些操作都是基于坐标系原点进行操作的。这意味着，如果我们要将一个图形向右移动100像素，我们就需要将它的x坐标增加100。如果我们要将一个图形旋转45度，我们就需要将它的旋转角度增加45度。如果我们要将一个图形放大两倍，我们就需要将它的宽度和高度都乘以2。

状态的保存和恢复

在复杂的多图形处理中，不同的图形应用的变换多种多种，这样就有可能产生混乱。因此，Canvas提供了save()和restore()方法来保存和恢复状态。

save()方法将当前的Canvas状态保存到一个栈中。restore()方法将栈顶的状态恢复到当前Canvas状态。这意味着，我们可以随时使用save()方法保存当前状态，然后进行任意数量的变换。当我们想要撤销这些变换时，只需使用restore()方法即可。

代码实现五角星

现在，我们已经学习了Canvas的基本图形变换和状态的保存恢复，让我们用这些知识来实现一个用Canvas绘制的五角星。

首先，我们需要创建一个新的Canvas元素。

<canvas id="canvas" width="500" height="500"></canvas>

然后，我们需要获取Canvas的上下文对象。

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

接下来，我们需要设置Canvas的背景颜色。

ctx.fillStyle = "black";
ctx.fillRect(0, 0, canvas.width, canvas.height);

现在，我们可以开始绘制五角星了。

ctx.save();
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(Math.PI / 2);
ctx.beginPath();
for (let i = 0; i < 5; i++) {
  ctx.lineTo(Math.cos(2 * Math.PI * i / 5) * 100, Math.sin(2 * Math.PI * i / 5) * 100);
}
ctx.closePath();
ctx.fillStyle = "white";
ctx.fill();
ctx.restore();