JavaScript 旋转图像画布 - JavaScript

在 JavaScript 中，我们可以使用 canvas 元素和一些绘图函数来创建图像和图形。本文将介绍如何使用 JavaScript 旋转图像画布。

1. 创建画布

首先，我们需要在 HTML 文件中创建一个 canvas 元素作为我们的画布：

<canvas id="canvas"></canvas>

接下来，在 JavaScript 中获取这个元素的引用：

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

2. 加载图像

我们需要加载一个图像，并在画布上绘制它。假设我们有一个图像文件 image.jpg：

const image = new Image();
image.src = 'image.jpg';

当图像加载完成后，我们可以使用 ctx.drawImage() 函数将其绘制到画布上：

image.onload = function() {
  ctx.drawImage(image, 0, 0);
}

3. 旋转图像

接下来，我们可以使用 ctx.rotate() 函数来旋转画布。这个函数需要一个表示旋转角度的参数，并以弧度为单位。例如，如果我们想将画布顺时针旋转 45 度：

const angle = Math.PI / 4; // 45 度的弧度
ctx.rotate(angle);

在旋转画布之后，我们需要重新绘制已加载的图像。我们可以使用相同的 drawImage() 函数来实现：

image.onload = function() {
  ctx.rotate(angle);
  ctx.drawImage(image, 0, 0);
}

4. 完整示例

下面是一个完整的示例，展示如何在 JavaScript 中旋转图像画布：

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

const image = new Image();
image.src = 'image.jpg';

const angle = Math.PI / 4; // 45 度的弧度

image.onload = function() {
  ctx.rotate(angle);
  ctx.drawImage(image, 0, 0);
}

请确保在 HTML 文件中添加一个 canvas 元素，并将其 id 设置为 'canvas'。

这就是使用 JavaScript 旋转图像画布的基本步骤。你可以自由调整旋转角度和图像位置，以创建更多独特的效果。