使用数组实现JavaScript中的图像旋转

// 加载图像
var image = new Image();
image.src = 'image.jpg';

// 创建画布
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');

// 图像加载完成后执行旋转操作
image.onload = function() {
  // 设置画布尺寸与图像尺寸相同
  canvas.width = image.width;
  canvas.height = image.height;

  // 绘制图像
  context.drawImage(image, 0, 0);

  // 获取像素数据
  var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
  var pixels = imageData.data;

  // 定义旋转角度（以弧度为单位）
  var angle = Math.PI / 4;

  // 定义旋转中心点
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;

  // 定义旋转后的图像尺寸
  var rotatedWidth = Math.abs(Math.cos(angle)) * canvas.width + Math.abs(Math.sin(angle)) * canvas.height;
  var rotatedHeight = Math.abs(Math.sin(angle)) * canvas.width + Math.abs(Math.cos(angle)) * canvas.height;

  // 创建新的画布用于绘制旋转后的图像
  var rotatedCanvas = document.createElement('canvas');
  rotatedCanvas.width = rotatedWidth;
  rotatedCanvas.height = rotatedHeight;
  var rotatedContext = rotatedCanvas.getContext('2d');

  // 计算旋转后的图像在新画布上的偏移量
  var offsetX = (rotatedWidth - canvas.width) / 2;
  var offsetY = (rotatedHeight - canvas.height) / 2;

  // 遍历每个像素进行旋转
  for (var y = 0; y < canvas.height; y++) {
    for (var x = 0; x < canvas.width; x++) {
      // 计算旋转后的像素位置
      var rotatedX = Math.cos(angle) * (x - centerX) + Math.sin(angle) * (y - centerY) + centerX;
      var rotatedY = -Math.sin(angle) * (x - centerX) + Math.cos(angle) * (y - centerY) + centerY;

      // 获取旋转后的像素颜色
      var sourceX = Math.floor(rotatedX);
      var sourceY = Math.floor(rotatedY);
      var sourceIndex = (sourceY * canvas.width + sourceX) * 4;

      // 将旋转后的像素颜色绘制到新画布上
      var targetX = Math.floor(x + offsetX);
      var targetY = Math.floor(y + offsetY);
      var targetIndex = (targetY * rotatedWidth + targetX) * 4;

      // 复制像素颜色
      pixels[targetIndex] = pixels[sourceIndex]; // 红色通道
      pixels[targetIndex + 1] = pixels[sourceIndex + 1]; // 绿色通道
      pixels[targetIndex + 2] = pixels[sourceIndex + 2]; // 蓝色通道
      pixels[targetIndex + 3] = pixels[sourceIndex + 3]; // 透明度通道
    }
  }

  // 将旋转后的像素数据绘制到新画布上
  rotatedContext.putImageData(imageData, offsetX, offsetY);

  // 在页面上显示旋转后的图像
  document.body.appendChild(rotatedCanvas);
};