当前位置：首页 > JavaScript

js实现turnright

2026-03-14 03:15:38JavaScript

实现向右旋转功能

在JavaScript中实现向右旋转（turn right）通常涉及对数组或矩阵的旋转操作。以下是几种常见场景的实现方法。

旋转数组元素

将数组元素向右旋转k次，每次移动一个位置：

function rotateRight(arr, k) {
    const n = arr.length;
    k = k % n;
    return arr.slice(-k).concat(arr.slice(0, -k));
}
// 示例
const arr = [1, 2, 3, 4, 5];
console.log(rotateRight(arr, 2)); // 输出 [4, 5, 1, 2, 3]

旋转二维矩阵

顺时针旋转90度（常用于图像处理或矩阵操作）：

function rotateMatrix(matrix) {
    const n = matrix.length;
    for (let i = 0; i < Math.floor(n / 2); i++) {
        for (let j = i; j < n - 1 - i; j++) {
            let temp = matrix[i][j];
            matrix[i][j] = matrix[n-1-j][i];
            matrix[n-1-j][i] = matrix[n-1-i][n-1-j];
            matrix[n-1-i][n-1-j] = matrix[j][n-1-i];
            matrix[j][n-1-i] = temp;
        }
    }
    return matrix;
}
// 示例
const matrix = [[1,2,3], [4,5,6], [7,8,9]];
console.log(rotateMatrix(matrix)); // 输出 [[7,4,1], [8,5,2], [9,6,3]]

DOM元素旋转

使用CSS transform实现DOM元素向右旋转：

function rotateElement(element, degrees) {
    element.style.transform = `rotate(${degrees}deg)`;
}
// 示例
const box = document.getElementById('myBox');
rotateElement(box, 90); // 向右旋转90度

图形旋转（Canvas）

在Canvas中实现图形向右旋转：

js实现turnright

function drawRotatedRect(ctx, x, y, width, height, degrees) {
    ctx.save();
    ctx.translate(x + width/2, y + height/2);
    ctx.rotate(degrees * Math.PI / 180);
    ctx.rect(-width/2, -height/2, width, height);
    ctx.stroke();
    ctx.restore();
}
// 示例
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
drawRotatedRect(ctx, 50, 50, 100, 50, 30);