如何使用vanilla javascript在画布中旋转矩形，使矩形的坐标也随旋转而改变？

使用vanilla JavaScript在画布中旋转矩形，并使矩形的坐标随旋转而改变，可以通过以下步骤实现：

1. 创建画布和矩形：
   • 使用HTML的<canvas>元素创建画布，并设置其宽度和高度。
   • 使用getContext('2d')方法获取画布的2D上下文。
   • 使用fillRect(x, y, width, height)方法在画布上绘制一个矩形，并设置其初始位置和尺寸。

• 旋转矩形：
  • 使用translate(x, y)方法将坐标系原点移动到矩形的中心位置。
  • 使用rotate(angle)方法旋转坐标系，其中angle为旋转角度（弧度制）。
  • 使用fillRect(-width/2, -height/2, width, height)方法绘制旋转后的矩形，注意坐标是相对于新的坐标系。

下面是一个示例代码：

// 获取画布和上下文
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 设置画布尺寸
canvas.width = 800;
canvas.height = 600;

// 矩形初始位置和尺寸
const x = 400;
const y = 300;
const width = 100;
const height = 50;

// 绘制初始矩形
ctx.fillStyle = 'blue';
ctx.fillRect(x, y, width, height);

// 旋转矩形
const angle = Math.PI / 4; // 旋转角度为45度
ctx.translate(x + width / 2, y + height / 2); // 将坐标系原点移动到矩形中心
ctx.rotate(angle); // 旋转坐标系
ctx.fillStyle = 'red';
ctx.fillRect(-width / 2, -height / 2, width, height); // 绘制旋转后的矩形

这样，就可以使用vanilla JavaScript在画布中旋转矩形，并使矩形的坐标随旋转而改变。请注意，这只是一个简单的示例，实际应用中可能需要根据具体需求进行调整和优化。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。

• 腾讯云云服务器（CVM）：提供高性能、可扩展的云服务器实例，可用于搭建应用、网站、数据库等各种场景。详情请参考腾讯云云服务器。
• 腾讯云对象存储（COS）：提供安全、稳定、低成本的对象存储服务，可用于存储和管理各种类型的数据，包括图片、视频、文档等。详情请参考腾讯云对象存储。