使用vanilla JavaScript在画布中旋转矩形,并使矩形的坐标随旋转而改变,可以通过以下步骤实现:
<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)。
领取专属 10元无门槛券
手把手带您无忧上云