绘制直线和旋转变换JavaScript脚本298

在计算机图形学中，旋转变换是一种将物体绕特定轴旋转一定角度的操作。本文将介绍如何使用JavaScript编写一个脚本，该脚本可以在画布上绘制直线并对其进行旋转变换。

绘制直线

要绘制一条直线，我们可以使用Canvas API的lineTo()方法。该方法接受两个参数：线段的端点坐标。以下代码绘制一条从点(100, 100)到点(200, 200)的直线：```javascript
// 创建画布元素
const canvas = ('canvas');
const ctx = ('2d');
// 绘制直线
();
(100, 100);
(200, 200);
();
```

旋转变换

要将直线旋转一定角度，我们可以使用Canvas API的translate()和rotate()方法。translate()方法将画布原点移动到指定位置，而rotate()方法将画布绕原点旋转指定角度。

以下代码将直线绕画布原点旋转45度：```javascript
// 绕原点旋转45度
( / 2, / 2);
(45 * / 180);
// 绘制直线
();
(100, 100);
(200, 200);
();
```

旋转中心

默认情况下，旋转变换是绕画布原点进行的。但是，我们可以通过在translate()方法中指定额外的参数来更改旋转中心。

以下代码将旋转中心移动到点(150, 150)，然后将直线绕该点旋转45度：```javascript
// 将旋转中心移动到(150, 150)
(150, 150);
(45 * / 180);
// 绘制直线
();
(100, 100);
(200, 200);
();
```

示例代码

以下是一个完整的示例代码，展示如何绘制直线并对其进行旋转变换：```javascript
const canvas = ('canvas');
const ctx = ('2d');
// 设置画布大小
= 500;
= 500;
// 绘制直线
();
(100, 100);
(200, 200);
();
// 将旋转中心移动到(150, 150)
(150, 150);
// 绕旋转中心旋转45度
(45 * / 180);
// 再次绘制直线
();
(100, 100);
(200, 200);
();
(canvas);
```